Layout bir paragrafta bozulmadı. Display size'da 17 veya daha fazla karakter taşıyan Almanca navigation compound'unda bozuldu. İngilizce tasarım etiketi düzenli bir dikdörtgen kabul etmişti. Almanca onu yapısal yüke çevirdi.
Bu siteden çıkan ders Almanca için her yerde daha fazla alan ayırmak değildi. Layout kararlarını İngilizcenin beklenen şekline bağlamayı bırakmaktı.
Metin genişlemesi tek yönde olmaz
Almanca uzun compound ve geniş label üretir. Aynı sayfadaki Türkçe metin çoğu zaman İngilizceden kısa akar, fakat tekil kelimeler yine zor wrap noktaları yaratabilir. Heading, button, metadata ve navigation farklı davranır. Genel bir dil genişleme çarpanı bu farkı saklar.
Gerçek metni erkenden kullanın. En uzun olası label ve zor editorial title dahil olsun. Yalnızca çevrilmiş placeholder paragraf test etmeyin. Hata küçük ve kısıtlı component'ta çıkar: sabit action taşıyan card, tab row, breadcrumb, filter ve display heading.
Her locale'i kendi ritmi olan özgün içerik gibi ele alın. Dillerde aynı satır sayısı tutarlılık değildir. Hiyerarşi ve kullanılabilir alanı korumak tutarlılıktır.
Grid'den önce metin esnesin
Grid track, intrinsic metin genişliğinin bütün layout'u dışarı itmesine izin vermeden content column'un küçülmesini sağlamalı. Flex ve grid child çoğu zaman shrink etmeye izin veren açık minimum ister. Action'lar ana okuma kolonu kullanılamaz hale gelmeden önce wrap etmeli, stack olmalı veya içeriğin altına geçmelidir.
İngilizceye göre hesaplanan sabit card height kullanmayın. Image, title başlangıcı veya action region gibi anlam taşıyan noktaları hizalayın, metin bloğunun büyümesine izin verin. Kusursuz row alignment çeviriyi kesmeyi gerektiriyorsa grid'e yanlış yetki verilmiştir.
Display size'da responsive type ve line-height, Almanca wrap için yeterli alan taşımalı. Ardından Türkçedeki ritmi inceleyin. Kısa metin fazla boşluğu görünür kılabilir.
Hyphenation dile özeldir
Automatic hyphenation global görsel yama olarak açılmamalı. Browser doğru kuralı seçmek için dili bilmelidir. MDN'in hyphens dokümanı, otomatik davranışın HTML lang attribute'una ve mevcut dil sözlüğüne bağlı olduğunu açıklar.
Her locale için document language ayarlayın. Inline dil değişimini bulunduğu element'ta işaretleyin. Almanca editorial metin veya dar display context için hyphenation'ı görsel kontrolden sonra seçici açın. Türkçe ve İngilizce farklı wrap kararı isteyebilir. Component'ı korumak için her kelimeyi bölen word-break kuralı kullanmayın. Kutuyu korurken okumayı bozar.
Manual soft break yalnızca istisnai ve kontrollü içerikte kullanılmalı. Evrensel CSS stratejisi değil, içerik kararıdır.
Component'ın semantik kaçış yolu olsun
Button label wrap edebilir, fakat icon-only fallback anlamı kaybedebilir. Navigation item overflow menu içine taşınabilir, ancak bilgi mimarisi açık kalmalı. Card büyüyebilir, carousel yüksekliği beklenmedik biçimde değişebilir. Her component'ın uzun ve kısa metne cevabı tanımlı olmalı.
Bu cevapları component testlerine yazın. Desteklenen bütün locale'leri dar ve geniş width'te render edin. Eksik çeviri, mixed-language isim ve tasarım örneğini aşan CMS içeriğini dahil edin. Visual regression screenshot faydalıdır, keyboard focus ve screen-reader name de kontrol edilmelidir.
Bu hafta üç locale'i zorlayın
En yoğun sayfayı seçin, her placeholder'ı güncel İngilizce, Türkçe ve Almanca içerikle değiştirin. Her dar component içindeki en uzun bölünmeyen kelimeyi bulun. Browser zoom, narrow width ve large text setting ile test edin.
Her hatada sırayla karar verin: Track küçülebilir mi, metin doğal wrap edebilir mi, component reflow olabilir mi, wording editorial olarak değişmeli mi? Dile duyarlı hyphenation'ı yapısal seçeneklerden sonra uygulayın.
Son olarak locale'leri aynılaştırmak için hızlıca aralarında geçmek yerine her birini bağımsız inceleyin. Sağlam multilingual layout üç dili eşit kutuya sıkıştırmaz. Arayüz hiyerarşi, hizalama ve niyetini korurken her dile doğal duyulacağı alanı verir.