SVG ascension, descente et ligne de base


Exemple

La propriété units-per-em est l'une des propriétés de police les plus importantes. Il est utilisé pour donner un sens à toute valeur de toute autre propriété.

la spécification de la police CSS2 a une belle définition du em sqare :

Certaines valeurs, telles que les mesures de largeur, sont exprimées en unités relatives à un carré abstrait dont la hauteur correspond à la distance prévue entre les lignes de type de même taille

la ligne de base par défaut est à 0 dans le carré em. pour le calcul de la hauteur de la ligne et les objectifs d'alignement, les deux propriétés ascendantes et descendantes sont les plus importantes.

L'ascension est la distance maximale entre la ligne de base et le point le plus élevé de votre plus grand glyphe. Usaually c'est 1em, donc la valeur que vous avez donnée pour les unités-per-em.

La descente est la distance maximale entre la ligne de base et le point le plus bas de tout glyphe de votre police.

Voici une police avec des glyphes rendant une ligne au plus bas et au plus haut point, ainsi qu'à la ligne de base.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

La montée et la descente sont utilisées pour déterminer la hauteur de la ligne. Les unités par em et la ligne de base sont utilisées pour déterminer la position et la taille par rapport aux autres polices utilisées.