Code typographique, HTML et CSS

Ce site res­pecte, autant que pos­sible, les règles du code typo­gra­phique. Si vous sou­hai­tez en faire autant sur vos propres pages, voi­ci le code HTML et CSS nécessaire.

Caractères spéciaux

Apos­trophe courbe (’) : coder ’

Tech­ni­que­ment, il s’agit d’un guille­met simple fer­mant (rsquo signi­fie right single quo­ta­tion mark), mais il rem­place avan­ta­geu­se­ment l’affreuse apos­trophe droite.

Guille­mets fran­çais : ouvrant («), « - fer­mant (»), » (left/right angle quo­ta­tion mark).

Pour appli­quer un signe dia­cri­tique à une lettre, minus­cule ou majus­cule, on la fait pré­cé­der de & et suivre du code du signe sou­hai­té (acute pour l’accent aigu, grave pour l’accent grave, cedil pour la cédille, circ pour l’accent cir­con­flexe, uml [de l’allemand Umlaut] pour le tré­ma), ter­mi­né par un point-vir­gule. Par exemple, À se code À

Les autres codes dont vous pour­riez avoir besoin (signes dia­cri­tiques, liga­tures, sym­boles…) se trouvent sur cette page.

L’espace forte insé­cable est connue des web­mas­ters (  pour non-brea­king space). À ce jour, il n’existe pas de code HTML de l’espace fine.

Modifications de la casse

Petites capi­tales : pla­cer votre texte entre les balises <span class="ptescap"> et </span>

et défi­nir la classe ptescap en CSS comme :

.ptescap {
	font-variant: small-caps;
}

De même, pour mettre en expo­sant, pla­cer votre texte entre les balises <span class="sup"> et </span>

et défi­nir la classe sup en CSS comme :

.sup { 
	vertical-align: super; 
	font-size: 50%; 
}

Ain­si,

dictionnaire des <span class="ptescap">xix</span><span class="sup">e</span> 
et <span class="ptescap">xx</span><span class="sup">e</span> siècles

per­met d’écrire « dic­tion­naire des xixe et xxe siècles ».