Comment avoir un rendu propre avec l'élément SUP ?
27 réponses
Olivier Miakinen
Bonjour,
Le 03/12/2009 12:01, SAM répondait à denisb :
>
>>> Dans une page HTML, c'est même 1<sup>re</sup>, 2<sup>e</sup> et
>>> 3<sup>e</sup> respectivement.
>>
>> oui.
>> ce qui nous met un souk infernal dans les espacements de lignes.
>
> sup { font-size: .5em; line-height: 1em; }
>
> Même si le line-height arrange un poil,
> cette règle ne résout rien, le font-size est ignoré
Voilà une excellente question, qui plus est parfaitement en charte dans
ce groupe : quelle est la meilleure façon d'écrire des abréviations avec
lettres supérieures sans modifier les espacements de ligne ?
Dans une page HTML, c'est même 1<sup>re</sup>, 2<sup>e</sup> et 3<sup>e</sup> respectivement.
oui. ce qui nous met un souk infernal dans les espacements de lignes.
sup { font-size: .5em; line-height: 1em; }
Même si le line-height arrange un poil, cette règle ne résout rien, le font-size est ignoré
Voilà une excellente question, qui plus est parfaitement en charte dans ce groupe : quelle est la meilleure façon d'écrire des abréviations avec lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ? Déjà, je ne serai pas assez tordu pour mettre <abbr> :) Ensuite, simplement : sup { line-height: 0 }
Olivier Miakinen a écrit :
Bonjour,
Le 03/12/2009 12:01, SAM répondait à denisb :
Dans une page HTML, c'est même 1<sup>re</sup>, 2<sup>e</sup> et
3<sup>e</sup> respectivement.
oui.
ce qui nous met un souk infernal dans les espacements de lignes.
sup { font-size: .5em; line-height: 1em; }
Même si le line-height arrange un poil,
cette règle ne résout rien, le font-size est ignoré
Voilà une excellente question, qui plus est parfaitement en charte dans
ce groupe : quelle est la meilleure façon d'écrire des abréviations avec
lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ?
Déjà, je ne serai pas assez tordu pour mettre <abbr> :)
Ensuite, simplement :
sup { line-height: 0 }
Dans une page HTML, c'est même 1<sup>re</sup>, 2<sup>e</sup> et 3<sup>e</sup> respectivement.
oui. ce qui nous met un souk infernal dans les espacements de lignes.
sup { font-size: .5em; line-height: 1em; }
Même si le line-height arrange un poil, cette règle ne résout rien, le font-size est ignoré
Voilà une excellente question, qui plus est parfaitement en charte dans ce groupe : quelle est la meilleure façon d'écrire des abréviations avec lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ? Déjà, je ne serai pas assez tordu pour mettre <abbr> :) Ensuite, simplement : sup { line-height: 0 }
Olivier Miakinen
Le 05/12/2009 10:22, Olivier Masson a écrit :
Voilà une excellente question, qui plus est parfaitement en charte dans ce groupe : quelle est la meilleure façon d'écrire des abréviations avec lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ?
Déjà, je ne serai pas assez tordu pour mettre <abbr> :)
Et moi, pas assez pour penser à l'élément ABBR pour ces abréviations conventionnelles.
Ensuite, simplement : sup { line-height: 0 }
Eh bien voilà : il suffisait que je pose la question pour que tu nous donnes la réponse. C'est parfait, merci beaucoup !
-- Olivier Miakinen
Le 05/12/2009 10:22, Olivier Masson a écrit :
Voilà une excellente question, qui plus est parfaitement en charte dans
ce groupe : quelle est la meilleure façon d'écrire des abréviations avec
lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ?
Voilà une excellente question, qui plus est parfaitement en charte dans ce groupe : quelle est la meilleure façon d'écrire des abréviations avec lettres supérieures sans modifier les espacements de ligne ?
Des abréviations avec des sup ? Ah, un truc comme 1er ?
Eh bien voilà : il suffisait que je pose la question pour que tu nous donnes la réponse. C'est parfait, merci beaucoup !
Je confirme, merci !
C'est un truc qui m'irritait beaucoup aussi...
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
d'autant que ça reste encore assez moche le lle de Mlle se retrouve presque mélangé à la ligne du dessus, par exemple
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pas ni compris en quoi <abbr> pouvait aider ? (même si sémantiquement ... )
-- sm
Olivier Miakinen
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
d'autant que ça reste encore assez moche le lle de Mlle se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes : - diminuer le corps des lettres en SUP - augmenter la hauteur de ligne des paragraphes
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
(même si sémantiquement ... )
Sémantiquement, un ABBR doit servir plus souvent aux sigles qu'aux abréviations conventionnelles : il y a peu de risques que « 1^er » soit lu autrement que « premier », « C^ie » autrement que « compagnie » (sauf par mes enfants) ou « M^lle » autrement que « mademoiselle ».
-- Olivier Miakinen
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ...
c'est un peu tordu de devoir mettre la hauteur de ligne à 0
pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient
la même hauteur que celles sans lettres supérieures : mettre la hauteur
de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une
lettre supérieure qu'on change l'espacement ».
d'autant que ça reste encore assez moche
le lle de Mlle
se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes :
- diminuer le corps des lettres en SUP
- augmenter la hauteur de ligne des paragraphes
Comment arriver à faire : N°
où le o est
- réduit en taille
- à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un
navigateur à un autre ou d'une police de caractères à une autre j'avais
toujours des différences.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
(même si sémantiquement ... )
Sémantiquement, un ABBR doit servir plus souvent aux sigles qu'aux
abréviations conventionnelles : il y a peu de risques que « 1^er » soit
lu autrement que « premier », « C^ie » autrement que « compagnie » (sauf
par mes enfants) ou « M^lle » autrement que « mademoiselle ».
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
d'autant que ça reste encore assez moche le lle de Mlle se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes : - diminuer le corps des lettres en SUP - augmenter la hauteur de ligne des paragraphes
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
(même si sémantiquement ... )
Sémantiquement, un ABBR doit servir plus souvent aux sigles qu'aux abréviations conventionnelles : il y a peu de risques que « 1^er » soit lu autrement que « premier », « C^ie » autrement que « compagnie » (sauf par mes enfants) ou « M^lle » autrement que « mademoiselle ».
-- Olivier Miakinen
SAM
Le 12/6/09 12:53 AM, Olivier Miakinen a écrit :
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
Allez, on dira comme ça. Mais je n'aurais certainement pas trouvé tout seul !
d'autant que ça reste encore assez moche le lle de Mlle se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes : - diminuer le corps des lettres en SUP
Non (marche pô chez moi)(ou alors j'ai merdé)
- augmenter la hauteur de ligne des paragraphes
Oui, bon, bof.
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Bon on verra ça lors de la prochaine décennie ?!
-- sm
Le 12/6/09 12:53 AM, Olivier Miakinen a écrit :
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ...
c'est un peu tordu de devoir mettre la hauteur de ligne à 0
pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient
la même hauteur que celles sans lettres supérieures : mettre la hauteur
de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une
lettre supérieure qu'on change l'espacement ».
Allez, on dira comme ça.
Mais je n'aurais certainement pas trouvé tout seul !
d'autant que ça reste encore assez moche
le lle de Mlle
se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes :
- diminuer le corps des lettres en SUP
Non
(marche pô chez moi)(ou alors j'ai merdé)
- augmenter la hauteur de ligne des paragraphes
Oui, bon, bof.
Comment arriver à faire : N°
où le o est
- réduit en taille
- à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un
navigateur à un autre ou d'une police de caractères à une autre j'avais
toujours des différences.
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
Allez, on dira comme ça. Mais je n'aurais certainement pas trouvé tout seul !
d'autant que ça reste encore assez moche le lle de Mlle se retrouve presque mélangé à la ligne du dessus, par exemple
Pour cela, tu peux rajouter une ou plusieurs des règles suivantes : - diminuer le corps des lettres en SUP
Non (marche pô chez moi)(ou alors j'ai merdé)
- augmenter la hauteur de ligne des paragraphes
Oui, bon, bof.
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Bon on verra ça lors de la prochaine décennie ?!
-- sm
Olivier Masson
Olivier Miakinen a écrit :
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
Pas facile de s'y retrouver en typo web parce qu'il me semble que les définitions ne sont pas les mêmes qu'en typo classique et faire le moindre calcul me parait difficile puisque cela dépend des jambages, majuscules... Bien entendu, s'il venait à l'idée de quelqu'un de faire un sup en inline-block avec un saut de ligne, les lignes seraient confondues.
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Vous être contre l'utilisation du dégré pour faire un petit o ? Sinon un <sup>o</sup> fonctionne comme il faut mais ce sera aligné en-dessous de la hauteur de la majuscules. Et une minuscule, tu peux toujours mettre ton sup en /relative/ et mettre un top qui vaut la différence entre la hauteur de majuscule et l'oeil (hauteur des minuscules sans les jambages). Tu fais ça à l'oeil, sauf si tu as toutes les données.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
Oui bon, c'est un peu comme une blague de geek :) Mais je suis sûr que l'on doit pouvoir trouver un article quelque part qui dit que l'on doit employer abbr dans une recherche d'accessibilité pour les déficiences mentales (j'ai déjà lu des choses très proches).
Olivier Miakinen a écrit :
Le 06/12/2009 00:39, SAM a écrit :
N'empêche ...
c'est un peu tordu de devoir mettre la hauteur de ligne à 0
pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient
la même hauteur que celles sans lettres supérieures : mettre la hauteur
de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une
lettre supérieure qu'on change l'espacement ».
Pas facile de s'y retrouver en typo web parce qu'il me semble que les
définitions ne sont pas les mêmes qu'en typo classique et faire le
moindre calcul me parait difficile puisque cela dépend des jambages,
majuscules...
Bien entendu, s'il venait à l'idée de quelqu'un de faire un sup en
inline-block avec un saut de ligne, les lignes seraient confondues.
Comment arriver à faire : N°
où le o est
- réduit en taille
- à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un
navigateur à un autre ou d'une police de caractères à une autre j'avais
toujours des différences.
Vous être contre l'utilisation du dégré pour faire un petit o ?
Sinon un <sup>o</sup> fonctionne comme il faut mais ce sera aligné
en-dessous de la hauteur de la majuscules. Et une minuscule, tu peux
toujours mettre ton sup en /relative/ et mettre un top qui vaut la
différence entre la hauteur de majuscule et l'oeil (hauteur des
minuscules sans les jambages). Tu fais ça à l'oeil, sauf si tu as toutes
les données.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
Oui bon, c'est un peu comme une blague de geek :)
Mais je suis sûr que l'on doit pouvoir trouver un article quelque part
qui dit que l'on doit employer abbr dans une recherche d'accessibilité
pour les déficiences mentales (j'ai déjà lu des choses très proches).
N'empêche ... c'est un peu tordu de devoir mettre la hauteur de ligne à 0 pour qu'elle reste à 1em même pour sup
L'idée, il me semble, est que les lignes avec lettres supérieures aient la même hauteur que celles sans lettres supérieures : mettre la hauteur de ligne des SUP à 0 permet de dire « ce n'est pas parce qu'il y a une lettre supérieure qu'on change l'espacement ».
Pas facile de s'y retrouver en typo web parce qu'il me semble que les définitions ne sont pas les mêmes qu'en typo classique et faire le moindre calcul me parait difficile puisque cela dépend des jambages, majuscules... Bien entendu, s'il venait à l'idée de quelqu'un de faire un sup en inline-block avec un saut de ligne, les lignes seraient confondues.
Comment arriver à faire : N° où le o est - réduit en taille - à peu près aligné sur hauteur de majuscule
Pour ça, j'avais fait des essais à une époque, et malheureusement d'un navigateur à un autre ou d'une police de caractères à une autre j'avais toujours des différences.
Vous être contre l'utilisation du dégré pour faire un petit o ? Sinon un <sup>o</sup> fonctionne comme il faut mais ce sera aligné en-dessous de la hauteur de la majuscules. Et une minuscule, tu peux toujours mettre ton sup en /relative/ et mettre un top qui vaut la différence entre la hauteur de majuscule et l'oeil (hauteur des minuscules sans les jambages). Tu fais ça à l'oeil, sauf si tu as toutes les données.
Pas ni compris en quoi <abbr> pouvait aider ?
Moi ni non plus. ;-)
Oui bon, c'est un peu comme une blague de geek :) Mais je suis sûr que l'on doit pouvoir trouver un article quelque part qui dit que l'on doit employer abbr dans une recherche d'accessibilité pour les déficiences mentales (j'ai déjà lu des choses très proches).
Olivier
Le 07/12/2009 10:32, Olivier Masson a écrit :
Vous être contre l'utilisation du dégré pour faire un petit o ?
Perso, j'utilise : º. Mais à la réflexion, je ne sais plus pourquoi. Faut l'éclairage de OM.
