Mantıksal Özellikler

Gerçekten yaygın bir kullanıcı arayüzü modeli, destekleyici bir satır içi simgesi içeren bir metin etiketidir.

Simge metnin solunda bulunur ve ikisi arasında küçük bir boşluk margin-right tarafından sağlanır. Ama bir sorun var. çünkü bu yalnızca metin yönü soldan sağa olduğunda çalışır. Metin yönü, Arapça gibi dillerin okunduğu şekilde sağdan sola olarak değiştiyse simge metnin yanında durur.

CSS'de bunu nasıl hesaba katıyorsunuz? Mantıksal özellikler bu durumları çözmenize olanak sağlar. Diğer birçok avantajının yanı sıra, uluslararasılaştırma için ücretsiz, otomatik destek sağlarlar. Daha dayanıklı ve kapsayıcı bir kullanıcı arabirimi oluşturmanıza yardımcı olur.

Terminoloji

Üst, sağ, alt ve sol öğelerinin fiziksel özellikleri, görüntü alanının fiziksel boyutlarını ifade eder. Bunları haritadaki bir pusula gülü gibi düşünebilirsiniz. Diğer yandan, mantıksal özellikler bir kutunun kenarlarına da (içerik akışı) göre hareket ettik. Bu nedenle, metin yönü veya yazma modu değişirse bu değişkenler de değişebilir. Bu, yön stillerinden büyük bir değişim ve ve arayüzlerimizin stilini belirlerken bize daha fazla esneklik sağlıyor.

Akışı engelle

Blok akışı, içerik bloklarının yerleştirildiği yöndür. Örneğin, iki paragraf varsa blok akışı, ikinci paragrafın gideceği yerdir. İngilizce bir belgede blok akışı yukarıdan aşağıya doğrudur. Bunu, yukarıdan aşağıya doğru birbirini izleyen metin paragrafları bağlamında düşünün.

Üç blok, aşağı oklu div öğeleri, "engelleme akışı" etiketli

Satır içi akış

Satır içi akış, metnin cümle içinde nasıl aktığını gösterir. İngilizce bir dokümanda satır içi akış soldan sağadır. Web sayfanızın belge dilini Arapça olarak (<html lang="ar">) değiştirirseniz satır içi akış sağdan sola olacaktır.

Soldan sağa bir ok ve &quot;satır içi akış&quot; etiketli üç kelime, &quot;deniz kabuğu satıyor&quot;

Metin, belgenin yazma moduna göre belirlenen yönde akar. writing-mode özelliğinde metnin gösterildiği yönü değiştirebilirsiniz. Bu, tüm belgeye veya ayrı ayrı öğelere uygulanabilir.

Akışa bağlı

Geçmişte CSS'de kenar boşluğuna göre kenar boşluğu gibi özellikleri uygulayabildik. Örneğin, margin-top, öğenin fiziksel üst kısmına uygulanır. Mantıksal özelliklerle margin-top, margin-block-start haline gelir. Yani, dil ve metnin yönü ne olursa olsun engelleme akışı uygun kenar boşluğu kurallarına sahip olmalıdır.

Bir kutunun farklı boyutlarını ve her boyutlandırma bölümünün başladığı ve bittiği yeri gösteren diyagram

Boyutlandırma

Bir öğenin belirli bir genişliği veya yüksekliği aşmasını önlemek için şuna benzer bir kural yaz:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

Akışa bağlı eşdeğerleri, max-inline-size ve max-block-size'dır. min-height ve min-width yerine min-block-size ve min-inline-size özelliklerini de kullanabilirsiniz.

Mantıksal özelliklerle maksimum genişlik ve yükseklik kuralı şöyle görünür:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

Başlangıç ve bitiş

Üst, sağ, alt ve sol gibi yön tarifleri kullanmak yerine, ve bitişi olsun. Bu size blok başlangıç, satır içi bitiş, blok bitiş ve satır içi başlangıç özelliklerini sunar. Bunlar, yazma modundaki değişikliklere yanıt veren CSS özellikleri uygulamanıza olanak tanır.

Örneğin, metni sağa hizalamak için şu CSS'yi kullanabilirsiniz:

p {
  text-align: right;
}

Amacınız fiziksel sağla uyumlu değilse okuma yönünün başlangıcı yerine faydalı olmaz. Mantıksal değerlerle, metin yönüyle eşleşen daha yararlı start ve end değerleri de elde edersiniz. Metin hizalama kuralı artık şu şekilde görünür:

p {
  text-align: end;
}

Boşluklar ve konumlandırma

margin, padding ve inset için mantıksal özellikler ve bu öğelerin yazma modlarında birbiriyle nasıl etkileşime girdiğini daha kolay ve verimli hâle getiriyor. Kenar boşluğu ve dolguyla ilgili özellikler hâlâ yol tariflerine doğrudan eşlemedir, Ancak aradaki temel fark, yazma modu değiştiğinde bunun da değişmesidir.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

Bu, padding ile dikey bir alan ekler ve margin ile soldan dışarı iter. top özelliği de aşağı kaydırır. Mantıksal özellik eşdeğerleriyle aşağıdaki gibi görünür:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

Bu, içinde padding ile satır içi bir alan ekler ve bunu margin ile satır içi başlangıçtan dışarı iter. inset-block özelliği, bloğu blok başlangıcından içeri doğru taşır.

inset-block özelliği, mantıksal özelliklere sahip tek kısa seçenek değildir. Bu kural daha da daraltılabilir. kenar ve dolgu özelliklerinin stenolarını kullanarak yapabilirsiniz.

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

Kenarlıklar

Mantıksal özelliklerle border ve border-radius eklemek de yapılabilir. Sağa ve alta kenarlık eklemek için sağ yarıçapla birlikte aşağıdaki gibi bir kural yazabilirsiniz:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

Alternatif olarak, aşağıdaki gibi mantıksal özellikleri de kullanabilirsiniz:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

border-end-end-radius içindeki end-end, blok sonu ve satır içi uçtur.

Birimler

Mantıksal özellikler iki yeni birim getirir: vi ve vb. vi birimi, satır içi yöndeki görüntü alanı boyutunun% 1'idir. Mantıksal olmayan mülk eşdeğeri: vw. vb birimi, blok yönünde görüntü alanının% 1'idir. Mantıksal olmayan mülk eşdeğeri: vh.

Bu birimler her zaman okuma yönüyle eşleşir. Örneğin, bir öğenin bir görüntü alanının kullanılabilir satır içi alanının% 80'ini kaplamasını istiyorsanız yazma modu dikeyse vi birimini kullandığınızda bu boyut otomatik olarak yukarıdan aşağıya olacak şekilde değiştirilir.

Mantıksal özellikleri pragmatik olarak kullanma

Mantıksal özellikler ve yazma modları yalnızca uluslararasılaştırmaya yönelik değildir. Bunları, daha çok yönlü bir kullanıcı arayüzü üretmek için kullanabilirsiniz.

X ekseninde ve Y ekseninde etiketler olan bir grafiğiniz varsa Y etiketindeki metnin dikey olarak okunmasını isteyebilirsiniz.

Demodaki Y ekseni etiketinde writing-mode değeri vertical-rl olduğu için her iki etikette de aynı margin değerlerini kullanabilirsiniz. margin-block-start değeri her iki etiket için de geçerlidir çünkü blok başlangıcı Y ekseni için sağda ve X ekseni için üsttedir. Blok başlangıç kenarlarını görebilmeniz için kırmızı bir kenarlık vardır.

Simge sorununu çözme

Mantıksal özelliklere değindiğimize göre, bu bilgi, başladığımız tasarım problemine uygulanabilir.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

Kenar boşluğu, simge öğesinin sağına uygulandı. Simge ile metin arasındaki boşluğun tüm okuma yönlerini desteklemesi için bunun yerine margin-inline-end özelliğinin kullanılması gerekiyor.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

Okuma yönünden bağımsız olarak yerleşir.

Öğrendiklerinizi sınayın

Mantıksal özellikler bilginizi test etme

Siz elinizle yazarken bileğiniz hangi mantıksal eksende hareket ediyor?

block
inline

Mantıksal özelliklerden yararlanabilecek olanların tümünü işaretleyin

renkler
kutu köşeleri
hiza
sizes
gölgeler
kutu kenarları

Bir kelimenin hangi mantıksal tarafının altı çizilir?

satır içi başlangıç
blok sonu
blok başlangıcı
satır içi bitiş