OVH Cloud OVH Cloud

Comment avoir un rendu propre avec l'élément SUP ?

27 réponses
Avatar
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 ?

--
Olivier Miakinen

10 réponses

1 2 3
Avatar
Olivier Masson
Le 08/12/2009 00:38, Olivier a écrit :
Le 08/12/2009 00:18, Olivier a écrit :
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.



Maj : OM => Miakinen.

Tout le monde s'appelle Olivier quelque chose dans le coin ! ;)




Oui mais moi je suis un rebelle et je réponds qd même !
Et puis t'as raison, Olivier c'est surfait, je vais changer...

Pour le degré, eh bien c'est un degré, ça ne devrait poser de problème
que si les aides techniques interprètent cette unité comme un degré et
non comme numéro lorsqu'il suit un 'n'.
Avatar
Olivier Miakinen
Le 07/12/2009 10:32, Olivier Masson m'a répondu :

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 degré pour faire un petit o ?



À ça, plusieurs réponses :
- à la limite, le problème ne se pose pas si l'on n'a besoin que
d'écrire Nº, puisque le o en lettre supérieure existe dans Unicode
(il fait même partie de ISO Latin1 et ISO Latin9) : º ;
- il n'en reste pas moins que le degré est parfaitement rond alors que
le petit o a une forme de... o : °º°º°º°º°º ;
- mais surtout, le problème est pour toutes les lettres autres que le
o et le a : 1^er, 1^re, C^ie, M^me, M^mes, M^lle, etc., et aussi pour
les chiffres (10^100).

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 aurais un exemple précis de règles CSS qui marchent ?

Tu fais ça à l'oeil, sauf si tu as toutes les données.



Je suppose que ton deuxième emploi du mot « ½il » correspond à l'usage
courant et non l'usage typographique, n'est-ce pas ? Dans ce cas, si
tu veux dire que tu le règles en fonction de ce que tu vois dans un
navigateur donné, sur un système d'exploitation donné, avec une police
de caractères donnée et un corps donné, alors c'est bien le problème que
j'avais eu : ça change en fonction de paramètres que ne contrôle pas
l'auteur de la page web.

Pas ni compris en quoi <abbr> pouvait aider ?



Moi ni non plus. ;-)





<hors sujet>
Je n'ai pas réussi à trouver si « pas ni compris » était une expression
régionale, et si oui, de quelle région... SAM ?
</>

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).



Même pour des abréviations hyper-conventionnelles comme « M^me » ?
Avatar
Olivier Masson
Le 08/12/2009 11:31, Olivier Miakinen a écrit :

- à la limite, le problème ne se pose pas si l'on n'a besoin que
d'écrire Nº, puisque le o en lettre supérieure existe dans Unicode
(il fait même partie de ISO Latin1 et ISO Latin9) : º ;



Mince alors, je ne l'avais jamais vu (ou plutôt remarqué).

- mais surtout, le problème est pour toutes les lettres autres que le
o et le a : 1^er, 1^re, C^ie, M^me, M^mes, M^lle, etc., et aussi pour
les chiffres (10^100).




Quel problème ? Un line-height nul ne suffit pas ?

Tu aurais un exemple précis de règles CSS qui marchent ?




Précis, non ; qui marche, faut voir.
Tiré d'une css :
body { font-size: 1.1em; line-height: 1.5 }
sup { position: relative; top:0.1em; font-size: 0.6em; line-height:0; }
Les approximations de calcul font que tu observes parfois un décalage
pour certains redimensionnements.

Je suppose que ton deuxième emploi du mot « ½il » correspond à l'usage
courant et non l'usage typographique, n'est-ce pas ? Dans ce cas, si
tu veux dire que tu le règles en fonction de ce que tu vois dans un
navigateur donné, sur un système d'exploitation donné, avec une police
de caractères donnée et un corps donné, alors c'est bien le problème que
j'avais eu : ça change en fonction de paramètres que ne contrôle pas
l'auteur de la page web.




Je dis à l'oeil, pardon ½il, car on ne dispose pas toujours des données
typo de la fonte que l'on utilise.
Je pensais pouvoir enfin utiliser ex, mais ça ne fonctionnait pas
(j'avais peut-être mal réalisé mon test). Car normalement, un bottom de
1ex est, il me semble, censé placé mon texte à la hauteur des
minuscules. Or ça place le texte à une hauteur que je ne sais pas
interpréter.
Donc je fais à l'½il :)

Même pour des abréviations hyper-conventionnelles comme « M^me » ?



Ce n'était pas à propos de ce genre d'abréviations, donc je ne sais pas.
Mais les préconisation que je lis parfois pour l'accessibilité aux
déficiences mentales me semblent hors des réalités. Il me parait évident
que l'on ne peut destiner un site sur Edgard Morin à des déficients
mentales, sans cynisme aucun.
Avatar
SAM
Le 12/8/09 11:31 AM, Olivier Miakinen a écrit :

<hors sujet>
Je n'ai pas réussi à trouver si « pas ni compris » était une expression
régionale, et si oui, de quelle région... SAM ?



Oh !?
Çà c'est encore une de mes libertés prise avec les langues.
Ça se veut s'approcher de « pa ni pwoblem' »
tel que je crois volontiers employé dans certaine(s) iles.
Je pense que ça devrait se traduire par « il n'y a pas de problème »
<http://creoles.free.fr/Cours/glossai2.htm#N>
bien qu'un métropolitain sera tenté de comprendre « aucun problème »

Sauf que là avec « pas ni compris »
il faudrait lire « pas rien compris »
un peu comme dans le midi où, parfois, la double négation n'y est pas
une affirmation mais bien un renforcement de la négation.
Donc, finalement, il eut fallu comprendre « rien de rien compris »
ou « rien compris à quoique ce soit »

Maintenant, j'ai aussi ça en stock : « ça ne me rigole pas »
(Là c'est une expression familiale)
Donc ne pas s'étonner si un jour je l'emploie. ;-)

</>
Avatar
SAM
Le 12/8/09 12:13 PM, Olivier Masson a écrit :
Le 08/12/2009 11:31, Olivier Miakinen a écrit :

- à la limite, le problème ne se pose pas si l'on n'a besoin que
d'écrire Nº, puisque le o en lettre supérieure existe dans Unicode
(il fait même partie de ISO Latin1 et ISO Latin9) : º ;



Mince alors, je ne l'avais jamais vu (ou plutôt remarqué).



Ça y est ! Je viens de le trouver sur mon clavier: º (Alt+u)
Je n'ai plus aucune excuse pour continuer d'employer ° ...

- mais surtout, le problème est pour toutes les lettres autres que le
o et le a : 1^er, 1^re, C^ie, M^me, M^mes, M^lle, etc., et aussi pour
les chiffres (10^100).



Quel problème ? Un line-height nul ne suffit pas ?



Heu ... si je tape simplement :
1<sup>100</sup>
chez moi l'exposant 100 reste en taille identique à 1
Ça ne m'affiche pas: 10^100
(là, ici dans Thunderbird, le 100 est en + petit que le 1)
(par contre M^lle n'y est pas interprété du tout)

--
sm
Avatar
Olivier Miakinen
Le 08/12/2009 13:10, SAM a écrit :

<hors sujet>
[pas ni compris]



Oh !?
Çà c'est encore une de mes libertés prise avec les langues.
Ça se veut s'approcher de « pa ni pwoblem' »



Ah, je savais bien que ça me rappelait quelque chose, mais je n'avais
pas réussi à mettre le doigt dessus.

tel que je crois volontiers employé dans certaine(s) iles.
Je pense que ça devrait se traduire par « il n'y a pas de problème »
<http://creoles.free.fr/Cours/glossai2.htm#N>



Merci pour le lien et l'explication.

Maintenant, j'ai aussi ça en stock : « ça ne me rigole pas »
(Là c'est une expression familiale)
Donc ne pas s'étonner si un jour je l'emploie. ;-)



D'accord, on est prévenus ! ;-)
Avatar
Olivier Masson
Le 08/12/2009 13:58, SAM a écrit :

Heu ... si je tape simplement :
1<sup>100</sup>
chez moi l'exposant 100 reste en taille identique à 1
Ça ne m'affiche pas: 10^100
(là, ici dans Thunderbird, le 100 est en + petit que le 1)
(par contre M^lle n'y est pas interprété du tout)




Dans l'exemple que j'ai donné à Olivier, tu pourras constater que j'ai
également réduit la taille de la fonte dans <sup>
Avatar
SAM
Le 12/8/09 9:05 AM, Michael DENIS a écrit :
Olivier a écrit :
Tout le monde s'appelle Olivier quelque chose dans le coin ! ;)



C'est le monde des Olivier ? :-D



Ça y est !

Je viens de la comprendre !


Enfin ... je croix ?

Ok ! ---> []



Poussez pas là, quoi!

--
sm
Avatar
SAM
Le 12/8/09 4:45 PM, Olivier Masson a écrit :
Le 08/12/2009 13:58, SAM a écrit :

Heu ... si je tape simplement :
1<sup>100</sup>
chez moi l'exposant 100 reste en taille identique à 1
Ça ne m'affiche pas: 10^100
(là, ici dans Thunderbird, le 100 est en + petit que le 1)
(par contre M^lle n'y est pas interprété du tout)




Dans l'exemple que j'ai donné à Olivier,



à Olivier Toutcourt ?

tu pourras constater que j'ai
également réduit la taille de la fonte dans <sup>



Ben non ... vu que je n'ai pas trouvé ce à quoi tu te réfères.
Sur un autre NG que fclwa ?

De mon côté la réduction de taille de fonte dans sup est complètement
ignorée par au moins un de mes navigateurs.

--
sm
Avatar
Olivier Miakinen
Le 09/12/2009 00:05, SAM demandait à Olivier Masson :

Dans l'exemple que j'ai donné à Olivier,



à Olivier Toutcourt ?



... à Olivier moi-même :

<4b1e34f7$0$21165$
body { font-size: 1.1em; line-height: 1.5 }
sup { position: relative; top:0.1em; font-size: 0.6em; line-height:0; }
</>


--
Olivier Miakinen
1 2 3