OVH Cloud OVH Cloud

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
Nikita Calvus-Mons
SAM a écrit :
Le 11/30/09 3:08 PM, Nikita Calvus-Mons a écrit :
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.



Oui, mais pas au-dessus, par définition. On en revient à mon problème
initial. Je sais bien qu'on peut sans problème faire contourner une
image par un texte, mais je veux pouvoir l'envelopper complètement par
un paragraphe.

La seule solution, si j'en crois ça :

http://forum.alsacreations.com/topic-1-43485-1-Habillage-texte-autour-dune-image.html

(Laurie-Anne, réponse numéro 10)

semble être de couper le paragraphe en deux, ce qui me semble plus
"incorrect" que jamais puisque ça corrompt la structure du texte...
D'autant que j'ai un alinéa en début de paragraphe (p+p), et qu'il
faudrait donc que je dise au navigateur de ne pas en mettre si et
seulement si le <p> n'est pas un vrai début de paragraphe, mais une
astuce pour habiller une image...

Je veux bien faire ce genre de truc à la main, mais je suis en train de
créer un thème pour Drupal et je n'ai pas envie de forcer mes
contributeurs à saisir des "vrais-faux" paragraphes pour que l'image
soit à la bonne place...

Complexe...



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)



Je le sais bien ! C'est même la source de toutes mes interrogations. Je
disais bien mise en page "classique", c'est-à-dire print ;-)

Et je confirme qu'on place ce qu'on veut au poil de cul dans ce cas-là !

N.
Avatar
Nikita Calvus-Mons
SAM a écrit :
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 ?



Je n'en sais rien, mais qui a parlé de ça ?

Ou, qu'à tout le moins,
le $ commentant l'image ne doit pas la contenir ?



Ca c'est plus que discutable : la "typographie respectueuse" ne se
soucie pas de la manière dont est produit un résultat agréable à l'oeil
(je parle du print, puisque sur le web la typo est difficilement
"respectueuse"). Evidemment, des manières de travailler sont plus
sérieuses que d'autres, mais ce qui compte avant tout c'est le résultat.
Apparemment (et j'en suis parfaitement conscient), pas sur le web. Je
vois ce que tu veux dire, mais je crois qu'on entame un dialogue de
sourds, là.

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 }




Ce n'est pas une question d'être "la mort" : ce n'est tout simplement
pas ce que je souhaite faire.

(En l'occurrence, d'ailleurs, mon image flotte à droite - je n'ose pas
ajouter "bien sûr"... Mais c'est effectivement une évidence de laisser
la lettrine en haut à gauche, et descendante, et bien calée... Bref...)

N.
Avatar
SAM
Le 11/30/09 3:43 PM, Nikita Calvus-Mons a écrit :
SAM a écrit :
Le 11/30/09 3:08 PM, Nikita Calvus-Mons a écrit :
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.



Oui, mais pas au-dessus, par définition. On en revient à mon problème
initial. Je sais bien qu'on peut sans problème faire contourner une
image par un texte, mais je veux pouvoir l'envelopper complètement par
un paragraphe.



Pour le moment, et en attendant le HTML5 (peut-être ?)
non, ce n'est pas prévu de faire de l'XPress en HTML+CSS

Je veux bien faire ce genre de truc à la main, mais je suis en train de
créer un thème pour Drupal et je n'ai pas envie de forcer mes
contributeurs à saisir des "vrais-faux" paragraphes pour que l'image
soit à la bonne place...



Yaka faire un thème kivabien (cad avec texte coulant à droite ou à gauche).

Complexe...



de ttes façons comment resouds-tu la mise en place du clear: left; ?
(totomatique sans intervention de l'utilisateur kiniconnaitrien)

(donc aussi impossible de savoir quels mots borderont l'image)



Je le sais bien ! C'est même la source de toutes mes interrogations. Je
disais bien mise en page "classique", c'est-à-dire print ;-)



Pas ni compris là ...
(ou bien tu veux dire : classique = comme en impression ?)

Et je confirme qu'on place ce qu'on veut au poil de cul dans ce cas-là !



Montre !
(en html, pas en pdf)

--
sm
Avatar
Nikita Calvus-Mons
Nikita Calvus-Mons a écrit :
La seule solution, si j'en crois ça :

http://forum.alsacreations.com/topic-1-43485-1-Habillage-texte-autour-dune-image.html

(Laurie-Anne, réponse numéro 10)

semble être de couper le paragraphe en deux, ce qui me semble plus
"incorrect" que jamais puisque ça corrompt la structure du texte...
D'autant que j'ai un alinéa en début de paragraphe (p+p), et qu'il
faudrait donc que je dise au navigateur de ne pas en mettre si et
seulement si le <p> n'est pas un vrai début de paragraphe, mais une
astuce pour habiller une image...



Et je dis là une ânerie. Si j'ai <p><img><p> je ne suis pas dans le cas
"p+p". Une partie de la solution, donc.

N.
Avatar
Nikita Calvus-Mons
SAM a écrit :

Je le sais bien ! C'est même la source de toutes mes interrogations.
Je disais bien mise en page "classique", c'est-à-dire print ;-)



Pas ni compris là ...
(ou bien tu veux dire : classique = comme en impression ?)

Et je confirme qu'on place ce qu'on veut au poil de cul dans ce cas-là !



Montre !
(en html, pas en pdf)




;-)

Justement, non : je te montrerais (note le conditionnel) justement en
PDF, puisque comme tu l'as compris juste avant (mais en doutant !), je
parlais bien sûr de "comme en impression". "Classique" c'est le papier,
quoi...

Cordialement,

N.
Avatar
SAM
Le 11/30/09 3:52 PM, Nikita Calvus-Mons a écrit :
SAM a écrit :
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 ?



Je n'en sais rien, mais qui a parlé de ça ?



Les gens des 3 chiottes doivent bien s'appuyer sur des règles ou des
habitudes pour éditer les leurs, non ?
Aussi, si en typo on ne fait pas ce que tu dis, pourquoi eux
prévoiraient cela ?


Ou, qu'à tout le moins,
le $ commentant l'image ne doit pas la contenir ?



Ca c'est plus que discutable : la "typographie respectueuse" ne se
soucie pas de la manière dont est produit un résultat agréable à l'oeil



N'importe quoi !
La typo respecteuse respecte tt un tas de conventions qui doivent au
moins remplir un bouquin.

mais je crois qu'on entame un dialogue de sourds, là.



Oui, passons.
Mais pas tout à fait :
il suffit de pas mélanger page web et page imprimée
(ne pas vouloir, tt au moins à ce jour, vouloir faire exactement comme
dans la presse)

(En l'occurrence, d'ailleurs, mon image flotte à droite - je n'ose pas
ajouter "bien sûr"...



Et encore plus délicat.

Là on est obligé de jouer sur son emplacement à l'intérieur du texte,
pour pouvoir la placer (et qu'à peu près).

(ou à jouer de p et span au mieux du moins pire)

--
sm
Avatar
Nikita Calvus-Mons
SAM a écrit :
Le 11/30/09 3:52 PM, Nikita Calvus-Mons a écrit :
SAM a écrit :
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 ?



Je n'en sais rien, mais qui a parlé de ça ?



Les gens des 3 chiottes doivent bien s'appuyer sur des règles ou des
habitudes pour éditer les leurs, non ?
Aussi, si en typo on ne fait pas ce que tu dis, pourquoi eux
prévoiraient cela ?



En typo, on ne fait pas ce que je dis ? C'est-à-dire ? On ne met pas
d'image à droite ? Je ne te saisis pas. C'est toi qui as cru (à tort)
que je voulais mettre une image à gauche de ma lettrine, pas moi.

Par ailleurs, on parle de mise en page, ici, pas de typographie au sens
propre...



Ou, qu'à tout le moins,
le $ commentant l'image ne doit pas la contenir ?



Ca c'est plus que discutable : la "typographie respectueuse" ne se
soucie pas de la manière dont est produit un résultat agréable à l'oeil



N'importe quoi !
La typo respecteuse respecte tt un tas de conventions qui doivent au
moins remplir un bouquin.



Ces "conventions" remplissent plusieurs bouquins, et ne se soucient pas
de COMMENT techniquement tu produis un texte bien composé. (Traduction
de ma phrase ci-dessus, difficile à comprendre, j'en conviens.)

Tu confonds typographie et sur-couche logicielle (au sens très large,
incluant softs de PAO et de webdesign, entre autres) permettant de
réaliser des mises en page et de travailler sur la typo.


mais je crois qu'on entame un dialogue de sourds, là.



Oui, passons.
Mais pas tout à fait :
il suffit de pas mélanger page web et page imprimée
(ne pas vouloir, tt au moins à ce jour, vouloir faire exactement comme
dans la presse)



Je ne vois pas pourquoi, étant donné qu'il y a de bonnes raisons pour
lesquelles les normes et langages web évoluent. En 1996, c'était
impossible (et utopique), en 2009 les choses ont quand même sacrément
évolué, et justement dans le sens dont tu parles. Il y a fort à parier
que les prochains navigateurs seront capables d'interpréter des mises en
page encore plus fines et complexes qu'aujourd'hui.

Par ailleurs, je n'ai jamais dit que je voulais faire exactement comme
dans la presse. Je connais le web depuis plus de dix ans, tout comme toi
sans doute, et je connais ses limitations. Rien dans ce que j'ai écrit
ne te permet d'affirmer que j'ai envie de faire ce que je sais
impossible pour l'instant. Je pose des questions.

(En l'occurrence, d'ailleurs, mon image flotte à droite - je n'ose pas
ajouter "bien sûr"...



Et encore plus délicat.

Là on est obligé de jouer sur son emplacement à l'intérieur du texte,
pour pouvoir la placer (et qu'à peu près).

(ou à jouer de p et span au mieux du moins pire)




Quand je dis dialogue de sourds, j'ai tout bon !

Tout ce que tu viens de dire je le sais, et a priori rien de ce que j'ai
écrit auparavant ne le contredit. C'est assez fort, non ?

Les règles de typographie, que je connais assez bien, merci, et qui en
effet remplissent des bouquins, ne disent rien sur la manière de placer
des images dans des paragraphes ou non dans des documents web... Et rien
non plus sur la bonne manière d'utiliser InDesign ou XPress. Elles
disent uniquement (et elles ont raison) ce qui est agréable à l'oeil, ce
qu'est la norme, ce qu'est l'usage. Ces règles sont des recommandations
de bon sens, et elles se moquent que tu te serves d'un soft de PAO ou de
ciseaux, de colle et d'une machine à écrire pour composer tes pages...
C'est tout ce que je disais. Je parle de typo, tu parles de
l'application technique des règles via un soft ou un langage, c'est très
différent, non ?

Cela dit sur l'autre fil j'ai parlé un peu vite, j'ai corrigé mon erreur
tout seul (pas le même corps dans les deux h1, ok, j'ai honte !).

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

Cela dit sur l'autre fil j'ai parlé un peu vite, j'ai corrigé mon erreur
tout seul (pas le même corps dans les deux h1, ok, j'ai honte !).



Ça me semblait tellement évident qu'ils n'avaient pas le même corps, que
je n'ai pas cru que c'était la source du problème plutôt que ce qui
m'empêchait de le voir... ;-)
Avatar
Nikita Calvus-Mons
Olivier Miakinen a écrit :
Le 30/11/2009 16:28, Nikita Calvus-Mons a écrit :
Cela dit sur l'autre fil j'ai parlé un peu vite, j'ai corrigé mon erreur
tout seul (pas le même corps dans les deux h1, ok, j'ai honte !).



Ça me semblait tellement évident qu'ils n'avaient pas le même corps, que
je n'ai pas cru que c'était la source du problème plutôt que ce qui
m'empêchait de le voir... ;-)



Oui, en fait j'ai mélangé cette même impression visuelle avec le mauvais
souvenir des lettrines avec accent, sur IE (je ne sais plus quelle
version), qui était alignées sur le haut de l'accent. Ca faisait
descendre la lettrine, dont le haut n'était plus aligné sur le haut de
la ligne de texte. Un joyeux mélange de ma part, désolé !

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

en 2009 les choses ont quand même sacrément évolué,
et justement dans le sens dont tu parles. Il y a fort à parier
que les prochains navigateurs seront capables d'interpréter des mises en
page encore plus fines et complexes qu'aujourd'hui.



Oui, il parait.
Mais ... bon, on n'y est pas encore (je pense ?).

Par ailleurs, je n'ai jamais dit que je voulais faire exactement comme
dans la presse.



« classique "print" » me souviens-je.

Je connais le web depuis plus de dix ans, tout comme toi
sans doute, et je connais ses limitations. Rien dans ce que j'ai écrit
ne te permet d'affirmer que j'ai envie de faire ce que je sais
impossible pour l'instant. Je pose des questions.



« classique "print" »
(et +/- image positionnée + texte englobant)

Quand je dis dialogue de sourds, j'ai tout bon !
Tout ce que tu viens de dire je le sais,



Bon ...
N'empêche ... ce n'était pas évident à ta lecture.

et a priori rien de ce que j'ai
écrit auparavant ne le contredit. C'est assez fort, non ?



Pas le courage de tout relire.

Je parle de typo, tu parles de l'application technique des règles via
un soft ou un langage, c'est très différent, non ?



Non je ne parle pas pas de soft (sauf à essayer de préciser
"classique"), je parle bien de règles de composition (si la typo n'est
pas allé jusque là) même si dans la presse on se permet des fantaisies
comme des images détourées au milieu de texte (qui, si ça fait "joli",
n'en est pas moins assez illisible) qu'heureusement, à ce jour, il n'est
pas possible de faire sur une page web.

--
sm
1 2 3