Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

ALignement vertical des lettres capitales avec et sans accent - CSS

21 réponses
Avatar
Nikita Calvus-Mons
Bonjour,

J'ai trois titres <h1> dans trois colonnes différentes, alignées en haut
(en fait elles flottent toutes). J'utilise l'attribut text-transform:
uppercase; car tel est mon bon plaisir. Du coup j'obtiens souvent des
capitales accentuées.

Quand il y a des caps accentuées dans un titre, Firefox aligne sur le
haut de l'accent (ce qui est typographiquement incorrect). Le résultat
est très laid lorsque le titre d'à côté, sans accent, se retrouve ainsi
un chouïa plus haut...

IE 7 fait la même chose, mais moins violemment (mais il fait la même
chose !).

Y a-t-il moyen de forcer le comportement correct typographiquement,
c'est-à-dire d'aligner les lettre sans tenir compte de leurs signes
diacritiques (accents, cédilles, umlauts, iotas souscrits, etc.) ? J'en
doute fort, mais...

N.

10 réponses

1 2 3
Avatar
SAM
Le 11/30/09 2:48 PM, Nikita Calvus-Mons a écrit :
Bonjour,

J'ai trois titres <h1> dans trois colonnes différentes, alignées en haut
(en fait elles flottent toutes). J'utilise l'attribut text-transform:
uppercase; car tel est mon bon plaisir. Du coup j'obtiens souvent des
capitales accentuées.

Quand il y a des caps accentuées dans un titre, Firefox aligne sur le
haut de l'accent (ce qui est typographiquement incorrect). Le résultat
est très laid lorsque le titre d'à côté, sans accent, se retrouve ainsi
un chouïa plus haut...



Tu dois avoir un autre problème ...
Je n'arrive pas à avoir ce que tu dis avec mon Fx.2
Les titres accentués ou non, avec minuscules et majuscules, sont
présentés pareils et tous bien alignés.

À moins que tu n'emploies une police "exotique" ?
(en Comic Sans MS, par exemple, ttes les capitales ne sont pas d'exacte
même hauteur, me semble-ce)

IE 7 fait la même chose, mais moins violemment (mais il fait la même
chose !).



Donc il y a une autre règle qui contrarie dans l'une ou l'autre des
colonnes, non ?

Y a-t-il moyen de forcer le comportement correct typographiquement,
c'est-à-dire d'aligner les lettre sans tenir compte de leurs signes
diacritiques (accents, cédilles, umlauts, iotas souscrits, etc.) ? J'en
doute fort, mais...



Ben ... pourquoi ?
S'il y a une règle, elle est la même pour toute la police (et toutes les
fontes, si elles sont prévues pour de par nos pays).

En fait ça doit être l'alignement "bas" qui est utilisé,
voir : base-line en typo et css
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#descdef-baseline&gt;
(en profiter pour lire toute cette page)

--
sm
Avatar
Nikita Calvus-Mons
SAM a écrit :
Le 11/30/09 2:48 PM, Nikita Calvus-Mons a écrit :
Quand il y a des caps accentuées dans un titre, Firefox aligne sur le
haut de l'accent (ce qui est typographiquement incorrect). Le résultat
est très laid lorsque le titre d'à côté, sans accent, se retrouve
ainsi un chouïa plus haut...



Tu dois avoir un autre problème ...
Je n'arrive pas à avoir ce que tu dis avec mon Fx.2
Les titres accentués ou non, avec minuscules et majuscules, sont
présentés pareils et tous bien alignés.



Well... Voici donc la maquette provisoire http://www.idiomatique.org/tests/

IE 7 fait la même chose, mais moins violemment (mais il fait la même
chose !).



Donc il y a une autre règle qui contrarie dans l'une ou l'autre des
colonnes, non ?



Ben non... Enfin, à toi de voir, vu mon piètre niveau j'ai sans doute
fait une connerie mais je ne vois pas.


Y a-t-il moyen de forcer le comportement correct typographiquement,
c'est-à-dire d'aligner les lettre sans tenir compte de leurs signes
diacritiques (accents, cédilles, umlauts, iotas souscrits, etc.) ?
J'en doute fort, mais...



Ben ... pourquoi ?
S'il y a une règle, elle est la même pour toute la police (et toutes les
fontes, si elles sont prévues pour de par nos pays).



Oui, mais si la règle avait tort ? Ca s'est vu, non ? J'ai en mémoire le
merveilleux oubli du oe (le vrai) dans les entités HTML d'il y a plus de
dix ans... Ca a été plus que lentement corrigé.

Pas mal de règles de typo française de base (césure, ponctuation double,
etc.) sont mal supportées par les navigateurs. Parce que sans doute la
règle les ignore.

Ca s'améliore, ceci dit.

Ceci dit, j'y reviens : sur un même titre, dans la même colonne, c'est
bien quand on a un accent que la lettre "descend". Enlève l'accent et tu
verras que l'alignement du titre remonte (tu le vois en fonction de ses
voisins). Il y a donc un problème. Dans la règle sans doute, mais un
problème de typo.

N.
Avatar
Olivier Miakinen
Le 30/11/2009 16:07, Nikita Calvus-Mons a écrit :

Well... Voici donc la maquette provisoire http://www.idiomatique.org/tests/



Pour l'histoire des titres, c'est assez difficile de se rendre compte
ici vu que tu n'as pas la même taille de caractères au milieu et sur les
côtés.

En revanche, pour l'image, on voit bien que même le 2e paragraphe (qui
ne la contient pas) coule autour d'elle. Il n'y a donc strictement
aucune raison de l'inclure *dans* le premier paragraphe.

Tu pourrais aussi bien faire :
<p><img ...></p>
<p class="lettrine">Nous avons tant... </p>
<p>C'est entendu...</p>

[...] J'ai en mémoire le
merveilleux oubli du oe (le vrai) dans les entités HTML d'il y a plus de
dix ans... Ca a été plus que lentement corrigé.



D'une part ce n'est pas dans les entités HTML que ça manque mais dans
ISO-8859-1, et d'autre part il n'y a aucune raison de s'en priver dans
les news (½), de même que le C cédille majuscule (Ça).

Pas mal de règles de typo française de base (césure, ponctuation double,
etc.) sont mal supportées par les navigateurs. Parce que sans doute la
règle les ignore.



L'espace fine était encore mal supportée il y a quelques années (je ne
sais pas si c'est toujours le cas), mais c'est peut-être plus un
problème de fonte que de navigateur. En ce qui concerne la ponctuation
double je ne vois pas de quoi tu veux parler (sauf si c'est juste
l'obligation de mettre une espace insécable devant, différente selon
le caractère en question). Quant à la gestion de la césure, oui, c'est
un gros problème, très difficile à résoudre pour l'ensemble des types
d'écriture du monde.

Ca s'améliore, ceci dit.



Oui.


Cordialement,
--
Olivier Miakinen
Avatar
SAM
Le 11/30/09 4:07 PM, Nikita Calvus-Mons a écrit :


Ceci dit, j'y reviens : sur un même titre, dans la même colonne, c'est
bien quand on a un accent que la lettre "descend". Enlève l'accent et tu
verras que l'alignement du titre remonte (tu le vois en fonction de ses
voisins). Il y a donc un problème. Dans la règle sans doute, mais un
problème de typo.



J'ai fait 2 h1 dont l'un recouvre le 2nd
C'est farpaitement aligné (accent dans l'un, pas dans l'autre)

--
sm
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
Le 30/11/2009 16:07, Nikita Calvus-Mons a écrit :
Well... Voici donc la maquette provisoire http://www.idiomatique.org/tests/



Pour l'histoire des titres, c'est assez difficile de se rendre compte
ici vu que tu n'as pas la même taille de caractères au milieu et sur les
côtés.

En revanche, pour l'image, on voit bien que même le 2e paragraphe (qui
ne la contient pas) coule autour d'elle. Il n'y a donc strictement
aucune raison de l'inclure *dans* le premier paragraphe.



Oui c'est sûr, dans ce cas précis. Mais j'essaye d'imaginer une solution
d'habillage pour le cas général... Cela dit je vais en effet définir des
styles pour les images, ce sera plus simple dans un premier temps.


Tu pourrais aussi bien faire :
<p><img ...></p>
<p class="lettrine">Nous avons tant... </p>
<p>C'est entendu...</p>

[...] J'ai en mémoire le
merveilleux oubli du oe (le vrai) dans les entités HTML d'il y a plus de
dix ans... Ca a été plus que lentement corrigé.



D'une part ce n'est pas dans les entités HTML que ça manque



Circa 1998-1999, je me souviens très bien (suis-je formel ?) que &oelig;
n'existait pas. On n'avait que &aelig;. Chez Miaou, où je bossais, fut
même un temps où la seule solution pour afficher un ½ passait par
l'utilisation d'une image !

mais dans
ISO-8859-1, et d'autre part il n'y a aucune raison de s'en priver dans
les news (½), de même que le C cédille majuscule (Ça).



...

Je le sais (je suis correcteur de métier) mais franchement, dans les
news, c'est un peu compliqué pour un pauvre possesseur de clavier PC...


Pas mal de règles de typo française de base (césure, ponctuation double,
etc.) sont mal supportées par les navigateurs. Parce que sans doute la
règle les ignore.



L'espace fine était encore mal supportée il y a quelques années (je ne
sais pas si c'est toujours le cas), mais c'est peut-être plus un
problème de fonte que de navigateur.



Mmmh, je ne crois pas. En tout cas Firefox a progressé lui. IE avait un
train d'avance là-dessus. Maintenant, on a des espaces fines qui ont une
tronche potable.

En ce qui concerne la ponctuation
double je ne vois pas de quoi tu veux parler (sauf si c'est juste
l'obligation de mettre une espace insécable devant, différente selon
le caractère en question).



C'est bien ça. IE, quand tu oubliais le &nbsp;, était "malin" et le
mettait pour toi. FF, non. Je suppose que FF avait "raison", mais bon...

(Je te précise que je n'utilise pas non plus les guillemets français sur
les newsgroups, à dessein !)


Cordialement,

N.
Avatar
Nikita Calvus-Mons
SAM a écrit :
Le 11/30/09 4:07 PM, Nikita Calvus-Mons a écrit :


Ceci dit, j'y reviens : sur un même titre, dans la même colonne, c'est
bien quand on a un accent que la lettre "descend". Enlève l'accent et
tu verras que l'alignement du titre remonte (tu le vois en fonction de
ses voisins). Il y a donc un problème. Dans la règle sans doute, mais
un problème de typo.



J'ai fait 2 h1 dont l'un recouvre le 2nd
C'est farpaitement aligné (accent dans l'un, pas dans l'autre)




Indeed, indeed. Mea culpa, et maxima même.

N.
Avatar
rm
Bonsoir,
Le lundi 30 novembre 2009 à 16:58, Olivier Miakinen a écrit :

Tu pourrais aussi bien faire :
<p><img ...></p>
<p class="lettrine">Nous avons tant... </p>
<p>C'est entendu...</p>



Ça serait pas plus mal, en effet, pour éviter qu'Opera n'affiche deux
lettrines pour le prix d'une :)
voir http://files.getwebb.org/index.php?mode=view&id=cre66gc1
Est-ce un bug ou une interprétation trop stricte des spéc' ?

@+
--
rm - http://opera-fr.com
Avatar
Olivier Miakinen
Le 30/11/2009 17:49, Nikita Calvus-Mons a écrit :

[...] J'ai en mémoire le
merveilleux oubli du oe (le vrai) dans les entités HTML d'il y a plus de
dix ans... Ca a été plus que lentement corrigé.



D'une part ce n'est pas dans les entités HTML que ça manque



Circa 1998-1999, je me souviens très bien (suis-je formel ?) que &oelig;
n'existait pas. On n'avait que &aelig;.



Je ne le croyais pas, mais tu as parfaitement raison, dans HTML 3.2 il
n'y avait d'entités que pour ISO-Latin1 :
<http://www.w3.org/TR/REC-html32-19970114#latin1&gt;

Chez Miaou, où je bossais, fut
même un temps où la seule solution pour afficher un ½ passait par
l'utilisation d'une image !



Ça veut dire qu'il n'existait même pas dans Unicode ou ISO10646,
accessible par &#339; ? Bon sang, c'est possible aussi ! Je vois
que la première publication d'Unicode remonte à 1991, et
<http://www.w3.org/TR/html4/references.html#ref-ISO10646&gt;
référence une version de 1993. Dis donc, tu as vraiment essuyé
les plâtres des débuts du web !

mais dans
ISO-8859-1, et d'autre part il n'y a aucune raison de s'en priver dans
les news (½), de même que le C cédille majuscule (Ça).



...

Je le sais (je suis correcteur de métier) mais franchement, dans les
news, c'est un peu compliqué pour un pauvre possesseur de clavier PC...



Tu utilises un PC sous Windows avec un clavier français ? Si oui, ce
pilote est fait pour toi (comme il est fait pour moi quand je suis sur
Windows et pas sur Linux) :
<http://users.numericable.be/denis.liegeois/kbdfrac.htm&gt;.

L'espace fine était encore mal supportée il y a quelques années (je ne
sais pas si c'est toujours le cas), mais c'est peut-être plus un
problème de fonte que de navigateur.



Mmmh, je ne crois pas. En tout cas Firefox a progressé lui. IE avait un
train d'avance là-dessus. Maintenant, on a des espaces fines qui ont une
tronche potable.



En 2003 c'était tout aussi désastreux dans IE que dans le Gecko que
j'utilisais à l'époque (je ne me rappelle pas si ç'était encore Mozilla
ou déjà SeaMonkey) mais je reconnais n'avoir pas refait le test depuis.

En ce qui concerne la ponctuation
double je ne vois pas de quoi tu veux parler (sauf si c'est juste
l'obligation de mettre une espace insécable devant, différente selon
le caractère en question).



C'est bien ça. IE, quand tu oubliais le &nbsp;, était "malin" et le
mettait pour toi. FF, non. Je suppose que FF avait "raison", mais bon...



Hum... qu'est-ce qu'on a pu souffrir des comportements « malins » d'IE
quand il fallait expliquer aux auteurs de pages web que d'autres
navigateurs existaient...

Cela dit, si c'est vrai cela veut dire qu'à l'époque IE tenait compte de
l'attribut « lang » pour le formatage ?

(Je te précise que je n'utilise pas non plus les guillemets français sur
les newsgroups, à dessein !)



AltGr+q ; AltGr+s. ;-)
Avatar
Olivier Miakinen
Le 30/11/2009 19:18, rm a écrit :

Ça serait pas plus mal, en effet, pour éviter qu'Opera n'affiche deux
lettrines pour le prix d'une :)
voir http://files.getwebb.org/index.php?mode=view&id=cre66gc1
Est-ce un bug ou une interprétation trop stricte des spéc' ?



D'après <http://www.w3.org/TR/CSS21/selector.html#first-letter&gt; je pense
que c'est un bug. Sauf bien sûr s'il est avec une langue par défaut dans
laquelle « No » est considéré comme une seule lettre,
comme l'est le « ij » en néerlandais. ;-)
Avatar
Olivier Miakinen
Le 30/11/2009 19:26, je répondais à Nikita Calvus-Mons :

Ça veut dire qu'il n'existait même pas dans Unicode ou ISO10646,
accessible par &#339; ? Bon sang, c'est possible aussi ! Je vois
que la première publication d'Unicode remonte à 1991, et
<http://www.w3.org/TR/html4/references.html#ref-ISO10646&gt;
référence une version de 1993. Dis donc, tu as vraiment essuyé
les plâtres des débuts du web !



Désolé, j'ai confondu 1998-1999 avec 1988-1989, ce qui n'était bien sûr
pas possible. Non, à l'époque je pense que tu pouvais déjà utiliser les
appels de caractères numériques pour les caractères ½ et ¼.
1 2 3