CSS & Typographie: Uniforme alignement vertical du nombre Descendeurs

Question

Vérifiez la capture d'écran ci-dessous: http://www.jesserosenfield.com/beta/descenders.png

Mon problème est que descendant (comme le « 7 » dans la capture d'écran) numéros sont alignés verticalement avec le fond de la travée , tandis que les autres nombres sont alignés verticalement plus vers le milieu. Existe-t-il un moyen d '"égaliser" l'alignement vertical de tous les nombres, indépendamment de l'ascendeur/descendant?

Merci!

Le code:

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

et 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

Utilisez une police différente. Arial met tous les fonds de ses nombres sur la même ligne de base. Tout comme Microsoft Sans Serif. Ainsi fait Trebuchet. Donc, d'ailleurs, fait Times New Roman.

Le fait est que les nombres ont des ascendeurs et des descendeurs différents en fonction de la police. Ce que les typographes font est de centrer le "corps" du nombre en fonction de ce qu'ils croient être bon, puis monter ou descendre à partir de là. Habituellement, cette variation est sur les faces serif, mais pas toujours. Vous ne pouvez pas le contrôler, dans tous les cas. BTW, les 3, 4, 5, 7 et 9 sont ceux qui ont généralement les descendeurs et les 6 et 8 ont généralement les ascendeurs.

Answer 2

Tout ce que vous pouvez contrôler est l'alignement vertical de la ligne de base de texte dans son parent. Cependant, vous ne pouvez pas contrôler la position de police spécifique des contours des différents caractères en ce qui concerne la ligne de base du texte. Comme @Robusto l'a dit, une solution consiste à changer la police que vous utilisez, de sorte que tous les nombres se terminent à la ligne de base. La Géorgie est particulièrement mauvaise pour les nombres, parce que certains nombres (36 ou 84 par exemple) ont l'air bizarre en raison de l'ascendance de l'un des chiffres et de l'ascendance de l'autre. (Pas que vous devrez vous inquiéter du 36 mai bien sûr :-))

Une autre solution est de rester avec la police de Géorgie, mais d'augmenter le rembourrage vertical de sorte que les descendants sur 3, 4, 5, 7 et 9 ne sont pas aussi importants. Dans votre cas, ajouter 4-5px ci-dessous et au-dessus du nombre devrait le faire. Bien sûr, cela augmenterait la taille globale de l'indicateur de date, ce qui pourrait ne pas être souhaité. L'alternative à l'augmentation du rembourrage vertical serait de modifier la taille de la police de quelques pixels, ce qui rendrait les ascendants et descendants moins proéminents. Celui-ci ne fonctionne que si le zoom du navigateur de l'utilisateur est réglé à 100% et DPI régulier. Si le zoom est à 120% ou si l'utilisateur utilise un DPI élevé, la taille visuelle de la police est augmentée et les ascendeurs/descendants sont plus importants.

Answer 3

Je ne suis pas sûr que cela fonctionnerait, mais l'une des choses que j'essaieraient:

Il semble que vous avez une fonction php pour sortir le jour et le mois. Au lieu de simplement produire le nombre, pourquoi ne pas essayer de l'emballer dans un intervalle qui positionne/styles chaque nombre de manière appropriée.

ébauche de CSS & PHP:

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


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

Je comprends la nécessité d'une solution pure css/html avec les polices, mais si vous êtes vraiment désespéré, vous pouvez essayer d'utiliser des images séparées pour afficher les numéros. Votre fonction php devrait fonctionner de la même manière.

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

Encore une fois, juste quelques choses que je voudrais essayer, pas certain si elles fonctionneraient.

Answer 4

La Géorgie a old-style figures. Si vous avez vraiment besoin de doublures, vous devriez vérifier s'il existe une version OpenType de Georgia qui a cette option. Cela dit, je ne vois pas le problème d'utiliser des figures de style ancien dans le contexte que vous montrez; Il n'est pas nécessaire que tout soit aligné partout en permanence :)
Réglez simplement l'espacement de manière à ce qu'il y ait un espace raisonnable au-dessus et au-dessous.

Answer 5

Vous pouvez envisager d'utiliser simplement des nombres provenant d'une police similaire plus disponible. Times New Roman, par exemple, n'est pas trop différent, et mélanger les chiffres du Times avec ceux de la Géorgie ne semble pas trop mauvais.

Voici un exemple:

Answer 6

Le problème ici est en fait à voir avec proportional vs tabular figures.

Vous pouvez effectivement empêcher ce comportement en utilisant la règle CSS font-feature-settings avec la propriété tnum:

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