Metni bir kutuda dikey olarak "doğru şekilde" ortalayın

Metni bir kutuda dikey olarak ortalamanın kurallı bir kuralı var mı? Veya başka bir deyişle, bir kutunun metnin etrafına nasıl hizalanacağı? Tipografik metriklere dayalı üç seçenek hayal edebiliyorum (kesin olmayan resme bakın):

• X yüksekliğinin ortasına hizalayın
• Kapak yüksekliğinin ortasına hizalayın (" ortalama çizgi ")
• Kapağın ortasına hizalayın + iniş yüksekliği

Çoğunlukla bir programcıyım, ancak bunu sık sık yapmak zorundayım ve ortak bir ortak kural olup olmadığını veya tasarımcıların da uygun gördüğünüz gibi olup olmadığını bilmek istiyorum. Kişisel görüşler yerine grafik tasarım kitaplarına linkleri tercih ederim.

İyi soru!

Şimdiye kadar verilen cevapları gerçekten seviyorum ve katılıyorum. Cevabım bilimsel veya matematiksel akıl yürütmeden ziyade pragmatik tekniğe odaklanıyor. : D

Bununla birlikte, tercihim, kutumun üst ve alt satırları için başlangıç ​​noktası olarak taban çizgisi ve x-yüksekliğini (aşağıdaki Tür Terimleri bölümüne bakın) kullanmaktır. Umarım bu GIF açıklamaya yardımcı olur:

Taban çizgisi veya x yüksekliği ile hizalanacak yolu bulduğumda, görsel dolgu oluşturmak için SHIFT+ UPveya DOWNok tuşlarını kullanıyorum (varsayılan olarak Photoshop'ta her artış 10px, bu nedenle yukarıdaki örnekte 40pxüste dolgu ekledim ve alt).

Bu örnekte, aynı kutuyu / metni alıp bir “Dikey Merkezleri Hizala” yapsaydım hizalama aracının ne yaptığını görebilirsiniz (kırmızı metin hizalama aracını kullanmanın sonucudur):

Gördüğünüz gibi, oldukça yakın ( 2pxfark).

Özetlemek / sonuçlandırmak için:

Kullandığım teknikler:

1. Kutunun üst / alt yollarını sırasıyla x yüksekliği / taban çizgisine hizalayın (ve ardından SHIFTgörsel dolgu için ok tuşlarını dışarı doğru).
2. Benzer şekilde, bazen taban çizgisi ve x yüksekliği kutunun alt ve üst kenarlıklarını karşılayana kadar metni yukarı ve aşağı tuşlayacağım; oradan, pikselleri sayacağım ve sonra metni ortalarken geri kalanını iki yön arasında eşit olarak yayacağım.
3. Hem kutuyu hem de metni seçin, ardından bir “Dikey Merkezleri Hizala” ve “Yatay Merkezleri Hizala” yapın.
4. Son olarak, yerleşimi göz küresine aldığım zamanlar var. Genellikle, görsel “sarkma” yı önlemek için yukarı veya aşağı giderim (bu resim çerçeveleme ile ilgilidir, aşağıdaki Resim Çerçeveleme bölümüne bakın); bu özellikle yazı tipi boyutu tek sayı yüksekliğinde ve 1pxfark farklıysa doğrudur … Metni 1px(veya daha fazlasını) aşağıya değil yukarı doğru kaydırırım .

Resim çerçeveleme

En yaygın kullanılan paspas, tüm yol boyunca eşit bir marja sahiptir. Görsel merkez gerçek merkezden daha düşük olan resimlerde. [8] Alt ağırlık veya ofsetler paspasta sıklıkla kullanılır. Alt kenar boşluğu yan ve üst kenar boşluklarından daha büyük yapılır. Bir görüntüye bakarken, gözler görüntünün fiziksel merkezinden daha yukarı merkezleme eğilimindedir. Daha geniş bir alt kenar boşluğu oluşturarak ve altlığı ayarlayarak gözü görüntünün fiziksel merkezine çekersiniz. Üst Merkez, üst ve yan kenar boşluklarının eşit olduğu alt ağırlıklandırmanın bir alt kümesidir ve görsel olarak hoş bir etki yaratır. Bu, özellikle 8x10 açıklıklı 11x14 gibi sınırların eşit olmadığı paspaslar için geçerlidir.
- WikiPedia: Mat (resim çerçeveleme)

… ve burada:

Paspaslar altta 'ağırlıklı' çünkü gözümüz / beynimiz yer çekimini hissediyor. Bir hasır her yerde aynı genişlikteyse, beynimiz dibi biraz daha dar olarak kaydeder (görüntü matta görsel olarak ortalanmaz)
- WetCanvas> Öğrenme Merkezi> Stüdyo İpuçları ve Çerçeveleme> Çerçeveleme Tartışmaları Bu sayfayı tekrar yükle paspasın altı

Türü Terimler

- https://www.supremo.tv/typeterms/

BONUS!

Aşağıda, kap yüksekliğini, inişini, yükselişini, iniş / çıkışsız küçük harflerle karşılaştıran bir GIF var:

Her iki versiyonun da kutu içinde oldukça güzel bir şekilde sıralandığını düşünüyorum.

Görsel ağırlık o kadar dinamik ki, x-yüksekliği, kapak yüksekliği vb.İle dikte edilemez.

Örneğin, tasarımınızdaki bazı öğeler, matematiksel olarak "merkez" olmasına rağmen, gözü tuvalle karşılaştırıldığında soldan sağa doğru bir yöne çekebilir.

"Görsel merkez", tam merkezde olmamasına rağmen ağırlıkların tüm unsurlarının görsel olarak dengelendiği yerdir.

Bu aracı denemeyi deneyebilirsiniz: http://javier.xyz/visual-center/

Tasarım her zaman tam bir bilim değildir. Çoğu zaman doğru görünen, gerçek merkezin ne olduğu veya matematiksel olarak doğru olan şey olmayabilir.

Özellikle, sorunuzda en iyi optik hizalamayı belirlemek için metindeki yükselen ve alçaltıcılara bağlı olacaktır. Yükseliş veya iniş yoksa, ideal hizalama değişebilir. Örneklerinizde, üç numaralı en iyi seçim gibi görünüyor çünkü hem yükselenler hem de inişler var ve onları ortalamak göze en hoş görünüyor.