CSS e tipografia: alinhamento vertical uniforme de descendentes de número

Question

Confira a seguinte captura de tela:http://www.jesserosenfield.com/beta/descenders.png

Meu problema é que os números descendentes (como os "7" na captura de tela) estão alinhados verticalmente com o fundo do período, enquanto outros números estão alinhados verticalmente mais no meio. Existe uma maneira de "equalizar" o alinhamento vertical de todos os números, independentemente de Ascender / Descender?

Obrigado!

O código:

<div class="postDate">
     <span class="postDay"><?php the_time('j'); ?></span><br/>
     <span class="postMonth"><?php the_time('M'); ?></span>
</div> <!-- postDate -->

e CSS

.postDate {
    width: 99px;
    height: 74px;
    position: relative;
    left: -30px;
    font-family: Georgia, "times new roman", times, serif;
    background: url(images/dateFlag.png) no-repeat;
    text-align: center;
    color: #ffffcc;
    padding-top: 9px;
    }

.postDay {font-size: 42px; border: 1px solid red;}
.postMonth {font-size: 17px; text-transform: uppercase}

Answer 1

Use uma fonte diferente. Arial coloca todos os fundos de seus números na mesma linha de base. O mesmo acontece com a Microsoft Sans Serif. O mesmo acontece com Trebuchet. Então, nesse caso, faz o Times New Roman.

O fato é que os números têm diferentes ascendentes e descendentes, dependendo do tipo de letra. O que os tipógrafos fazem é centralizar o "corpo" do número com base no que acredita que parece bom e depois suba ou desce a partir daí. Geralmente essa variação está em faces com seriões, mas nem sempre. Você não pode controlá -lo, em qualquer caso. BTW, os 3, 4, 5, 7 e 9 são os que geralmente têm os descendentes e os 6 e 8 geralmente têm ascendes.

Answer 2

Não tenho certeza se funcionaria, mas uma das coisas que eu tentaria:

Parece que você tem uma função PHP para produzir o dia e o mês. Em vez de apenas emitir o número, por que não tentar embrulhá -lo em um período que posiciona/estiliza cada número adequadamente.

Esboço aproximado de CSS e PHP:

.georgiaFixNum7 {
    position: relative;
    top: 5px;
    font-size: 18px;
}


echo '<span class="georgiaFixNum' . $num . '">' . $num . '</span>';

Entendo a necessidade de uma solução pura de CSS/HTML com as fontes, mas se você estiver realmente desesperado, poderá tentar usar imagens separadas para exibir os números. Sua função PHP precisaria trabalhar de maneira semelhante.

echo '<img src="/img/' . $num . '.png" />';

Novamente, apenas algumas coisas que eu tentaria, não certas se elas funcionariam.

Answer 3

A Geórgia tem Figuras de estilo antigo. Se você realmente precisa de figuras de revestimento, verifique se existe uma versão do OpenType da Geórgia que tem essa opção.

Dito isto, não vejo o problema em usar figuras antigas no contexto que você mostra; Não há necessidade de ter tudo alinhado em todos os lugares o tempo todo :)
Basta configurar o espaçamento para que haja espaço razoável acima e abaixo.

Answer 4

O problema aqui tem a ver com figuras proporcionais vs tabulares.

Você pode impedir esse comportamento usando o CSS font-feature-settings governar com o tnum propriedade:

p {
  -webkit-font-feature-settings: 'tnum';
  -moz-font-feature-settings: 'tnum';
  -ms-font-feature-settings: 'tnum';
  font-feature-settings: 'tnum';
}

Answer 5

Tudo o que você pode controlar é o alinhamento vertical da linha de base do texto dentro de seus pais. No entanto, você não pode controlar a posição específica da fonte dos vários caracteres, com relação à linha de base do texto.

Como o @Robusto disse, uma solução é alterar a fonte que você está usando, para que todos os números terminem na linha de base. A Geórgia é particularmente ruim para números, porque alguns números (36 ou 84, por exemplo) parecem estranhos devido ao fato de um dos dígitos ter Ascender e o outro tendo um descendente. (Não que você tenha que se preocupar com 36 de maio, é claro :-))

Outra solução é ficar com a fonte da Geórgia, mas aumentar o preenchimento vertical para que os descendentes em 3, 4, 5, 7 e 9 não sejam tão proeminentes. No seu caso, adicionar 4-5px abaixo e acima do número deve fazê-lo. Obviamente, isso aumentaria o tamanho geral da bandeira da data, que pode não ser desejada.

A alternativa para aumentar o preenchimento vertical seria ajustar muito o tamanho da fonte, alguns pixels, o que tornaria os ascendentes e descendentes menos proeminentes. Este funciona apenas se o zoom do navegador do usuário estiver definido em 100% e DPI regular. Se o zoom estiver em 120% ou o usuário usar DPI alto, o tamanho visual da fonte será aumentado e os ascendentes/descendentes serão mais proeminentes.

Answer 6

Você pode considerar simplesmente usar números de uma fonte semelhante mais comumente disponível. O Times New Roman, por exemplo, não é muito diferente, e misturar os números desde os tempos com os da Geórgia não parece muito ruim.

Aqui está um exemplo: