28106 sujets

CSS et mise en forme, CSS3

Bonjour

Voici un code html très simple
<p>au clair de la lune mon ami pierrot donne-moi ta plume pour écrire un mot, ma chandelle est m<span class="bug"></span>orte, je n'ai plus de feu…"</p>

style css de span bug:
span.bug { style="position:absolute; visibility:hidden"}

Que cette balise contienne quelque chose ou rien, lorsque je retrécis la largeur de la page, Firefox me plante une césure (rupture de ligne) entre le "m" et le "o" sur le mot "morte", là où les autres navigateurs ne le font pas.

S'agit-il d'un bug connu? Existe-t-il une solution?

Merci
Modifié par Colnem2 (12 Mar 2019 - 18:19)
Bonjour

Merci d'avoir testé

Voici le fichier html que je viens de créer pour vérifier ta réponse


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
span.bug { position:absolute; visibility:hidden}
</style>
</head>

<body>
<p>au clair de la lune mon ami pierrot donne-moi ta plume pour écrire un mot, ma chandelle est m<span class="bug"></span>orte, je n'ai plus de feu…"</p>
</body>
</html>

Sans fioriture, donc ...
Je viens de le tester sous Firefox 65 et je constate le défaut.

Voici ce que j'obtiens à l'écran:
upload/1552427148-74815-lf.jpg
Modifié par Colnem2 (12 Mar 2019 - 22:46)
Modérateur
Salut,

Effectivement je viens de tester et je reproduit bien le comportement. C'est en fait quand la largeur de l'écran (ou du conteneur) arrive en fin de ligne pile entre le "m" et la fin de "morte". Firefox considère que comme il y a une balise il s'agit de deux mot séparé et il fait juste revenir le second mot "orte" à la ligne car il n'y a plus de place.

Une solution possible est d'encadrer le mot avec un nowrap :

<span class="nowrap">m<span class="bug"></span>orte</span>


.test {
  white-space: nowrap;
}

.bug {
  position: absolute;
  visibility: hidden;
}

Modifié par _laurent (13 Mar 2019 - 09:46)
Modérateur
Sur le fond je dirais que Firefox à raison, et j'opterais pour un display : none; ou display : contents; en alternative voir si cela suffit à les mettre tous d'accord Smiley decu

span.bug {display : none;}

ou
span.bug {display:contents;position:absolute; visibility:hidden}

mais j'imagine que tu si tu as choisi position et visibility c'est que tu as probablement une raison au delà d'un simple test ...

Pour infos aussi a propos des display none et contents : https://developer.mozilla.org/en-US/docs/Web/CSS/display#Accessibility_concerns
Modifié par gcyrillus (13 Mar 2019 - 15:43)
Bonjour

Merci pour vos réponses

Je ne pense pas que Firefox ait raison contre tout le monde: pas de raison de faire une rupture de ligne après une balise span. D'ailleurs, si le span n'est pas en absolu mais en static, le défaut n'apparaît pas.

Mettre un display:none ne résoud rien.
En effet, si le span.bug est caché, c'est qu'il doit apparaître à un moment donné.
Si je mets un display:none, le problème est réglé tant que le span.bug est caché, mais il revient dès qu'on le dévoile par un mouseover: le remède et pire que le mal car tout le texte se décale!

Le nowrap n'est pas satisfaisant non plus pour 2 raisons:
Le montage final, des plus classiques, est le suivant:
<p>texte <span class="conteneur">m<span class="bug">texte caché</span>orte</span>…</p>

Le code css, tout aussi classique, est le suivant

span.bug { position:absolute; visibility:hidden;}
span.conteneur {position:relative;}
span.conteneur:hover span.bug { visibility:visible;}


1 - La rupture se fait après le </span> de classe bug. Si le span.bug est suivi par un caractère du genre parenthèses, virgule ou point, la rupture se fait devant ce caractère et le résultat, vous en conviendrez, ne sera pas terrible (un point ou une virgule en début de ligne, hein…)! Resterait la solution de mettre ces caractères dans le conteneur nowrap, mais là-aussi pour l'esthétique…
2 - Le conteneur peut contenir un groupe de mots. Faire un nowrap sur un groupe de mot dans un texte fera une mise en page des plus disgracieuses, notamment sur un smartphone.

Quand aux autres options, du display, du white-space, du text-wrap, du no-wrap, etc... rien n'y fait!
Moralité: obligé de passer par du jquery pour faire une animation des plus rudimentaires qui doit relever de css1.0 !!!

Merci néanmoins pour votre aide et vos conseils.
Modifié par Colnem2 (14 Mar 2019 - 10:59)
Il y a pleins d'erreurs dans ton code ( span pas fermé, ] au lieu } ) d'autre part je ne comprend pas l’intérêt de mettre un texte caché en plein milieu du mot morte. Je ne sais pas ce que tu veux faire mais c'est une mauvaise idée de couper un mot comme cela, pour quelque raison que ce soit, et ce n'est assurément pas comme cela qu'il faut faire.
Modérateur
Salut,

En fait c'est ton "position: absolute;" qui déclenche ce comportement.
Pourquoi placer une balise en plein milieu d'un mot si c'est pour la replacer en absolute après ? Tu n'as pas moyen de faire ce que tu souhaite sans la position absolute ?
Bonjour messieurs

1 - Il y a des erreurs parce que j'ai tapé à la main: c'est corrigé. Mais il n'y en a pas dans ma page.
2 - Bien sûr, dans mes pages, je ne mets pas le span au milieu du mot: il s'agit d'un exemple pour montrer le bug. Je le mets au début ou à la fin du mot "morte".
Si je le mets au début et que le mot "morte" passe en début de ligne, le texte caché s'affiche en fin de la ligne précédente.
Si je le mets à la fin et qu'il est suivi par une virgule ou un point, ceux-ci passent tout seuls sur la ligne suivante qui débute alors par une virgule ou un point.

Voilà pourquoi ce bug me gêne.

Je sais que c'est le position absolute qui déclenche ce comportement. Il n'en demeure pas moins que c'est une anomalie de faire une rupture à la fin d'un span absolute inline non suivi d'un caractère sécable. D'ailleurs, Firefox est le seul des grands navigateurs à faire ça.

Merci de vos commentaires.
Modifié par Colnem2 (14 Mar 2019 - 11:01)
Ok, j'ai compris.

Ce que propose Laurent a l'air de solutionner le problème.
span.conteneur {position:relative; white-space: nowrap;}


Et en effet firefox n'a pas l'air d'avoir le bon comportement mais à part leur signaler je ne vois pas bien ce qu'on peut y faire.

J'aurai tendance a ne même pas corriger ce problème personnellement. Smiley murf
Modérateur
Ca ne nous dit pas pourquoi il faut qu'il soit positionné en absolute si tu tiens a le laisser dans le texte...

Colnem2 a écrit :
Je sais que c'est le position absolute qui déclenche ce comportement. Il n'en demeure pas moins que c'est une anomalie de faire une rupture à la fin d'un span absolute inline non suivi d'un caractère sécable. D'ailleurs, Firefox est le seul des grands navigateurs à faire ça.

Perso je ne vois pas ça comme une anomalie, mais plutôt comme un comportement logique qui n'a pas été modifié pour coller à ce que les gens pourraient attendre (comme toi ici).

La position absolute retire l'élément du flux, tout en le laissant dans le DOM, je trouve ça logique que le navigateur l'interprète comme une coupure dans le mot.
_laurent a écrit :
Ca ne nous dit pas pourquoi il faut qu'il soit positionné en absolute si tu tiens a le laisser dans le texte...

Je suppose que l'idée est de faire un tooltip/infobulle
Exact... Un infobulle qui se ballade au dessus du mot, tantôt à droite tantôt à gauche en fonction de la position du mot dans la ligne et de la longueur de l'info-bulle, tout en acceptant les rétrécissements d'écran faits par l'utilisateur. Si la longueur de l'info bulle est supérieure à la moitié (ou tout autre pourcentage définit par le codeur) de celle de la ligne, l'infobulle passe en multiligne en s'agrandissant vers le haut. Le tout devant être opérationnel pour des écrans de 320px (iphone 5) à ... max-width du body.

J'y suis arrivé en jQuery pour tous les navigateurs.
En css, j'y serai arrivé sans ce "bug" qui, sous Firefox uniquement, me met des virgules en début de ligne ou l'info-bulle à l'extrème droite quand le mot passe à l'extrème gauche.

"La position absolute retire l'élément du flux, tout en le laissant dans le DOM, je trouve ça logique que le navigateur l'interprète comme une coupure dans le mot"

Pas moi: puisque l'élément n'est pas dans le flux, il ne doit pas perturber le flux. et je ne suis pas le seul à penser ainsi puisque les développeurs de Microsoft, de Chromium et d'Opéra ont pensé comme moi.

Mais on a le droit d'être d'un avis différent.

Merci de la discussion, enrichissante.
Modifié par Colnem2 (14 Mar 2019 - 21:35)