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

Lettrine, suite et fin

24 réponses
Avatar
Nikita Calvus-Mons
Bonjour, et encore désolé pour les multiples messages qui auraient pu
n'en faire qu'un.

En réalité hier ma lettrine, même bien syntaxée, ne marchait pas, et
elle ne marche toujours pas ce matin dans mon vrai fichier de travail,
"index.html". Le truc, c'est que j'ai envoyé pour Olivier Miakinen pour
des raisons de confidentialité une version en latin "index_test.html"
qui fonctionnait elle parfaitement, et je ne comprenais pas pourquoi en
une nuit le comportement de Firefox avait changé.

Mais en allant revoir ma page "index.html" après avoir copié-collé la
bonne ligne de code CSS, je me suis rendu compte que ça ne marchait en
fait PAS. Et j'ai alors compris. La seule différence de structure entre
ces deux pages est une image, au tout début de l'article. Et il semble
bien que Firefox n'aime pas ça :

<p class="lettrine"><img ...>Le texte commence ici

Il faut décaler le tag <img> d'un caractère :

<p class="lettrine">L<img ...>e texte commence ici

C'est con, tout con, et ça s'apparente à un bug. Au lieu de prendre le
premier caractère après le tag <p>, il devrait prendre le premier
caractère non balisé. Mais bon !

Je ferai gaffe à l'avenir.

Cordialement,

N.

10 réponses

1 2 3
Avatar
Olivier Miakinen
Le 30/11/2009 10:52, Nikita Calvus-Mons a écrit :

[...] La seule différence de structure entre
ces deux pages est une image, au tout début de l'article. Et il semble
bien que Firefox n'aime pas ça :

<p class="lettrine"><img ...>Le texte commence ici



Il semble surtout qu'il respecte CSS 2.1 qui le dit explicitement :

<cit. http://www.w3.org/TR/CSS21/selector.html#first-letter>
The :first-letter pseudo-element must select the first letter of the
first line of a block, if it is not preceded by any other content (such
as images or inline tables) on its line. [...]
</cit.>

« if it is not preceded by any other content » : s'il n'est pas précédé
par un autre contenu ; « such as images » : tel que des images.

En revanche il n'y avait rien de tel dans CSS 2.0 si j'en crois la
traduction en français :

<cit. http://www.yoyodesign.org/doc/w3c/css2/selector.html#first-letter>
Le pseudo-élément :first-letter peut être employé pour faire des
capitales initiales et des lettrines, ce sont des effets typographiques
courants. [...]
</cit.>

Il faut décaler le tag <img> d'un caractère :

<p class="lettrine">L<img ...>e texte commence ici



Euh... c'est drôlement moche, ça, et contraire aux principes de
séparation du contenu et de la présentation. Par exemple, j'aimerais
bien voir ce que cela donne dans une version pour aveugles, en mode
texte ou en mode parlé.

C'est con, tout con, et ça s'apparente à un bug. Au lieu de prendre le
premier caractère après le tag <p>, il devrait prendre le premier
caractère non balisé. Mais bon !



Ben non, il devrait respecter la norme. On pourrait éventuellement
critiquer la norme elle-même, mais pas les navigateurs qui font ce
qu'elle préconise.

Cordialement,
--
Olivier Miakinen
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
Il semble surtout qu'il respecte CSS 2.1 qui le dit explicitement :

<cit. http://www.w3.org/TR/CSS21/selector.html#first-letter>
The :first-letter pseudo-element must select the first letter of the
first line of a block, if it is not preceded by any other content (such
as images or inline tables) on its line. [...]
</cit.>

« if it is not preceded by any other content » : s'il n'est pas précédé
par un autre contenu ; « such as images » : tel que des images.



Merci pour la trad ;-)

Il faut décaler le tag <img> d'un caractère :

<p class="lettrine">L<img ...>e texte commence ici



Euh... c'est drôlement moche, ça,



C'est le code, que les lecteurs (non informaticiens "par défaut") ne
voient pas. Est-ce donc vraiment si moche ? (Je connais les arguments de
la "programmation correcte", mais ici, apparemment il n'y a pas d'autre
solution, si ? Et il est absolument hors de question pour moi de limiter
ma présentation pour des raisons techniques si facilement contournables.
Enfin, s'il y a une solution "propre", je fonce, bien sûr !)

et contraire aux principes de
séparation du contenu et de la présentation.



Pourquoi ? Ca revient à dire, en poussant un peu, que je n'ai pas le
droit de mettre une image dans un paragraphe, c'est ça ?

Par exemple, j'aimerais
bien voir ce que cela donne dans une version pour aveugles, en mode
texte ou en mode parlé.



Euh... Certes, mais comment faire alors quand on veut une lettrine et
une image tout en haut d'un bloc texte ? Décaler d'un ou de douze
caractères ne change rien au problème, si ? Ou alors tu veux dire qu'il
faut décaler d'un mot entier pour que ce soit plus "propre" ? Je ne te
suis pas, en fait...

Ou alors, faire une classe spéciale pour les images, c'est ça ? En
"float" ? (Je sens que ça vient... ;-)

Cordialement,

N.
Avatar
SAM
Le 11/30/09 11:42 AM, Nikita Calvus-Mons a écrit :
Olivier Miakinen a écrit :

Par exemple, j'aimerais
bien voir ce que cela donne dans une version pour aveugles, en mode
texte ou en mode parlé.



Euh... Certes, mais comment faire alors quand on veut une lettrine et
une image tout en haut d'un bloc texte ?



Ben ... je suppose que l'image à afficher est liée à la lettrine ?

.letrine { background: url(plus.gif) no-repeat left top; }
.letrine:first-letter { margin-left: 20px; color: red; font-size: 200%;
font-weight: bold; float: left}

<p class="letrine">
L'objet est la lettrine plus imagette-iconnette-liée en début de §.
</p>

Ou alors, faire une classe spéciale pour les images, c'est ça ? En
"float" ? (Je sens que ça vient... ;-)



En tous cas :
.letrine:before { content: url(plus.gif); }
donne le non même résultat que l'image codée en dur au début du §.
(avec le désavantage que cette image n'est pas stylable :-( )


Il ne reste que :

<p>
<img src="1.jpg" alt=""/>
<span class="letrine">Là ça doit fonctionner, non ?</span>
</p>

--
sm
Avatar
Nikita Calvus-Mons
SAM a écrit :
Le 11/30/09 11:42 AM, Nikita Calvus-Mons a écrit :

Euh... Certes, mais comment faire alors quand on veut une lettrine et
une image tout en haut d'un bloc texte ?



Ben ... je suppose que l'image à afficher est liée à la lettrine ?



Ben, non ! C'est une photo illustrant un article, tout simplement.
Avatar
Olivier Miakinen
Le 30/11/2009 14:13, SAM a écrit :

.letrine [...]

<p class="letrine">
[...]



C'est rigolo, écrit comme ça cela me fait plus penser aux « latrines »
qu'aux « lettrines ». ;-)

En tous cas :
.letrine:before { content: url(plus.gif); }
donne le non même résultat que l'image codée en dur au début du §.
(avec le désavantage que cette image n'est pas stylable :-( )



En tout cas, c'est cohérent avec le fait que dans l'exemple suivant de
la norme c'est le « S » de « Special! » qui est mis en lettrine :

p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}


Il ne reste que :

<p>
<img src="1.jpg" alt=""/>
<span class="letrine">Là ça doit fonctionner, non ?</span>
</p>



Pas sûr, vu que « inline » ne fait pas partie de le liste suivante :
<cit. http://www.w3.org/TR/CSS21/selector.html#first-letter>
The :first-letter pseudo-element applies to block, list-item,
table-cell, table-caption and inline-block elements.
</cit.>
Avatar
Olivier Miakinen
Le 30/11/2009 14:37, Nikita Calvus-Mons a écrit :

Euh... Certes, mais comment faire alors quand on veut une lettrine et
une image tout en haut d'un bloc texte ?



Ben ... je suppose que l'image à afficher est liée à la lettrine ?



Ben, non ! C'est une photo illustrant un article, tout simplement.



Dans ce cas, que fait la photo à l'intérieur du premier paragraphe ?
Est-ce que ce qui suit ne serait pas préférable ?

<div>
<img ...>
<p class="lettrine">
Le texte commence ici
</p>
...
</div>
Avatar
SAM
Le 11/30/09 2:47 PM, Olivier Miakinen a écrit :
Le 30/11/2009 14:13, SAM a écrit :
.letrine [...]

<p class="letrine">
[...]



C'est rigolo, écrit comme ça cela me fait plus penser aux « latrines »
qu'aux « lettrines ». ;-)



M'enfin comme en JS j'ai bien l'droit d'orthographier comme j'veux ?!

Mébon ... ça rejoint bien : cf. tt en bas.

Il ne reste que :

<p>
<img src="1.jpg" alt=""/>
<span class="letrine">Là ça doit fonctionner, non ?</span>
</p>



Pas sûr, vu que « inline » ne fait pas partie de le liste suivante :
<cit. http://www.w3.org/TR/CSS21/selector.html#first-letter>
The :first-letter pseudo-element applies to block, list-item,
table-cell, table-caption and inline-block elements.
</cit.>



En effet ... marche pô :-(
C'est vraiment la chiotte ces WC3

--
sm
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
Le 30/11/2009 14:37, Nikita Calvus-Mons a écrit :
Ben, non ! C'est une photo illustrant un article, tout simplement.



Dans ce cas, que fait la photo à l'intérieur du premier paragraphe ?
Est-ce que ce qui suit ne serait pas préférable ?

<div>
<img ...>
<p class="lettrine">
Le texte commence ici
</p>
...
</div>



Ben, comment faire un habillage autour de l'image, alors ? C'est là le
problème épineux que je rencontre, en fait. Mettre une image en dehors
des paragraphes, ok, mais si je veux que le texte habille l'image, il
faut bien que celle-ci soit "dedans"... (Peut-être pas, hein: je demande...)

Pour résumer, dans ce cas précis l'image est tout en haut, mais ça ne
satisfait pas le "cas général" dans lequel je veux pouvoir habiller une
image placée n'importe où (de préférence où je veux ;-) dans le corps du
texte.

En mise en page classique on fait un bloc image qu'on place au
millimètre, mais là...

N.
Avatar
SAM
Le 11/30/09 2:37 PM, Nikita Calvus-Mons a écrit :
SAM a écrit :
Le 11/30/09 11:42 AM, Nikita Calvus-Mons a écrit :

Euh... Certes, mais comment faire alors quand on veut une lettrine et
une image tout en haut d'un bloc texte ?



Ben ... je suppose que l'image à afficher est liée à la lettrine ?



Ben, non ! C'est une photo illustrant un article, tout simplement.



Et elle sera utilisable par les navigateurs-texte ?

Je suppose que ça ne doit pas être bien vu une lettrine accolée à une
image en typographie respectueuse ?
Ou, qu'à tout le moins,
le $ commentant l'image ne doit pas la contenir ?

Ceci étant, ce n'est pas vraiment la mort de faire :

<div class="telline">
<img src="1.jpg" alt=""/><p>L'image ci-contre, bla bla</p>
<hr>
<img src="2.jpg" alt=""/><p>L'image ci-contre, bla bla</p>
</div>

.telline img { float: left; width:150px}
.telline hr { visibility: hidden; clear: left; }
.telline p:first-letter { font-size: 200%; color: red }

--
sm
Avatar
SAM
Le 11/30/09 3:08 PM, Nikita Calvus-Mons a écrit :
Olivier Miakinen a écrit :
Le 30/11/2009 14:37, Nikita Calvus-Mons a écrit :
Ben, non ! C'est une photo illustrant un article, tout simplement.



Dans ce cas, que fait la photo à l'intérieur du premier paragraphe ?
Est-ce que ce qui suit ne serait pas préférable ?

<div>
<img ...>
<p class="lettrine">
Le texte commence ici
</p>
...
</div>



Ben, comment faire un habillage autour de l'image, alors ? C'est là le
problème épineux que je rencontre, en fait. Mettre une image en dehors
des paragraphes, ok, mais si je veux que le texte habille l'image, il
faut bien que celle-ci soit "dedans"... (Peut-être pas, hein: je
demande...)



Non, un float: lef; appliqué à l'image
va faire habiller l'image à sa droite et dessous (s'il y a assez de
texte) que le texte soit directement accolé ou mis dans un P.

Pour résumer, dans ce cas précis l'image est tout en haut, mais ça ne
satisfait pas le "cas général" dans lequel je veux pouvoir habiller une
image placée n'importe où (de préférence où je veux ;-) dans le corps du
texte.



Là, pour les navigateur-texte ça va leur faire drôle

La Tour image un point jpg illustration tour effel Effel culmine à

pour :

<p>La Tour <img src="1.jpg" alt="illustration tour effel"/> Effel culmine à

En mise en page classique on fait un bloc image qu'on place au
millimètre, mais là...



Non ... pas au mm près
En tous cas pas si on veut faire couler du texte à côté.
(il est impossible de savoir quelle place prendra ce texte à l'écran du
l'utilisateur)
(donc aussi impossible de savoir quels mots borderont l'image)

--
sm
1 2 3