Lettrine, suite et fin
Nikita Calvus-Mons
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.
Olivier Miakinen
>
> [...] 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
Nikita Calvus-Mons
> 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.
SAM
> Olivier Miakinen a ï¿œcrit :
>
>> 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
Nikita Calvus-Mons
> Le 11/30/09 11:42 AM, Nikita Calvus-Mons a ï¿œcrit :
>>
>> 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.
Olivier Miakinen
>
> .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.>
Olivier Miakinen
>>>
>>> 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>
SAM
> 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
Nikita Calvus-Mons
>
> 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.
SAM
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
SAM
> 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
Nikita Calvus-Mons
> Le 11/30/09 3:08 PM, Nikita Calvus-Mons a ï¿œcrit :
>> 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.
Nikita Calvus-Mons
> 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.
SAM
> 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
Nikita Calvus-Mons
>
> 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.
Nikita Calvus-Mons
>>
>> 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.
SAM
> 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
Nikita Calvus-Mons
> 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.
Olivier Miakinen
>
> 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... ;-)
Nikita Calvus-Mons
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.
SAM
>
> 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
Nikita Calvus-Mons
> 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 ?).
Je pointais juste une "attitude" de rejet (du progrï¿œs, en l'occurrence,
ou de l'ï¿œvolution, disons, pour rester neutre).
Qui me rappelle un peu lorsque Yahoo! est passￜ du fond "non forcￜ"
(c'est-ￜ-dire la plupart du temps dans le beau gris "vintage" du Web des
dï¿œbuts) au forï¿œage du fond blanc, par ï¿œgards pour le foutu "grand
public" qui voulait du "joli". Pas mal de rï¿œacs (j'en ï¿œtais, je dois le
dire !) ￜtaient contre. Bon, l'histoire nous a enterrￜs, elle a tranchￜ
: les sites de l'ï¿œpoque ï¿œtaient tout simplement laids. Ils ï¿œtaient
"purs" mais laids. Se dï¿œbarrasser de ce gris par dï¿œfaut n'ï¿œtait donc pas
une si mauvaise chose.
>> Par ailleurs, je n'ai jamais dit que je voulais faire exactement comme
>> dans la presse.
>
> ￜ classique "print" ￜ me souviens-je.
Le mot ici est "exactement" : je suis trￜs bien placￜ pour savoir que
c'est impossible. Tu fais dï¿œcidï¿œment preuve de beaucoup de mauvaise foi.
>> 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)
Oui, c'ï¿œtaient des *questions*. Tu pouvais y rï¿œpondre comme Olivier,
cordialement, mï¿œme si mes questions t'ï¿œnervaient, au lieu de manier des
"N'importe quoi !" et autres ordres comminatoires du type "Lire ï¿œa".
Du reste, positionner une image dans un texte englobant, ï¿œa ne semble
pas poser a priori d'ï¿œnormes problï¿œmes algorithmiques pour des softs
aussi divers que Word, InDesign, et tant d'autres. Je suis mï¿œme sï¿œr
qu'un nerd de profil "informatique-typo-graphisme" est dￜjￜ en train de
plancher sur quelque chose. Pourquoi se refuser ￜ imaginer, par exemple,
qu'on pourra un jour (ou pas !) dï¿œcider de positionner une image *par
rapport* ￜ un paragraphe, en indiquant qu'on veut la mettre ￜ 30% de la
hauteur totale dudit paragraphe ? Un calcul de la surface du texte, de
celle de l'image, et quelques autres joyeusetï¿œs, et l'affaire serait
rￜglￜe, pour le navigateur au moins. Reste ￜ crￜer les specs CSS, en
pensant ￜ tous les cas de figure douteux (dernier paragraphe trop court,
etc.). Pourquoi *par principe* refuser que ce serait un progrï¿œs ? Une
simple possibilitￜ d'expression en plus ?
La mise en page n'est pas rï¿œservï¿œe aux webdesigneurs (c'est un comble
pour moi de mï¿œme ï¿œmettre cette ï¿œvidence, mais comme tu opposes les deux
avec un certain mï¿œpris pour ce qui demeure, excuse-moi, la "vraie" mise
en page, je me sens quand mￜme obligￜ de remettre les choses ￜ leur
place). Elle est une discipline graphique, donc en partie "artistique".
Ce qui compte en premier lieu, c'est le rï¿œsultat visuel, et le confort
de lecture (un ï¿œquilibre entre les deux, ou un dï¿œsï¿œquilibre volontaire).
Le reste n'est que technique. (Ou art pur, comme avec Apollinaire, cf
ci-dessous.)
>> 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.
Je pense surtout que ce n'est pas le problï¿œme. Les Olivier (les deux qui
m'ont rï¿œpondu sur ce newsgroup) ne m'ont pas pris "par dï¿œfaut" de haut,
avec des "N'importe quoi !" (sur le seul sujet, d'ailleurs, oￜ je suis
peut-ï¿œtre plus compï¿œtent que toi, ce qui est assez cocasse). Ils m'ont
parlￜ comme ￜ un adulte.
Toi tu m'as rￜpondu de faￜon plusieurs fois mￜprisante, et de plus ￜ
cￜtￜ de mes questions, en ￜmettant des jugements parfaitement hors sujet
("En quoi c'est la mort de faire ï¿œa ?", etc.). C'est dommage.
> 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.
Je crois que tout est dit avec ce "heureusement". Pour toi, tout
habillage d'image est "illisible". Moi, je considï¿œre qu'avec du talent,
il est possible de se servir de ce genre de technique pour faire de
jolies choses. Ce qui, soit dit en passant, n'est pas exactement nouveau
ni rï¿œvolutionnaire en typographie ! Voir le passage sur Apollinaire, qui
a jouￜ avec la forme du "bloc" typographique pour ses poￜmes visuels.
http://perso.univ-lyon2.fr/~edbreuil/dada/memoire/adb/I/a.html
Je vais ï¿œviter de me mettre en mode "toi" (mï¿œpris par dï¿œfaut), en
suggï¿œrant que peut-ï¿œtre tu devrais changer de lecture, et jeter tous tes
magazines oￜ par dￜfinition le dￜtourage est dￜbile, laid et
"conformiste". Ce serait m'imaginer des choses sur ce que tu lis ou
connais, et je pourrais alors manier des grands "N'importe quoi !" dï¿œs
que j'ai mal lu ce que tu ï¿œcris.
Olivier m'a appris des trucs, mais toi avec ton attitude un brin
nￜgative et tes rￜponses ￜ cￜtￜ, qui rￜinventaient l'eau chaude avec une
petite dose de mￜpris, tu m'as plutￜt braquￜ, je dois te le dire (ￜa se
sent, non ?).
Salut,
N.
SAM
> SAM a ï¿œcrit :
>> Le 11/30/09 4:28 PM, Nikita Calvus-Mons a ï¿œcrit :
>
> m'ont rï¿œpondu sur ce newsgroup) ne m'ont pas pris "par dï¿œfaut" de haut,
> avec des "N'importe quoi !" (sur le seul sujet, d'ailleurs, oￜ je suis
> peut-ï¿œtre plus compï¿œtent que toi, ce qui est assez cocasse). Ils m'ont
> parlￜ comme ￜ un adulte.
Lￜ je reￜois la monnaie de ma piￜce.
Bon ... peut-ￜtre va t-on apprendre ￜ se connaitre, et saura t-on passer
par dessus des impressions ?
Je n'ai malheureusement pas un style de rï¿œponse ... "trï¿œs heureux".
Pourtant je les voudrais bon enfant.
En tous cas c'est sans mￜchancetￜ.
> tu m'as plutￜt braquￜ, je dois te le dire (ￜa se sent, non ?).
Tu m'en vois trￜs sincￜrement dￜsolￜ. Vraiment!
D'autant que, malgrￜ mon "style", je n'ai pas l'impression d'avoir ￜtￜ
absolument toujours ￜ cￜtￜ de la plaque.
Je te remercie de ta sincￜritￜ et vais essayer de me corriger.
(ï¿œa va ï¿œtre trï¿œs trï¿œs dur, depuis le temps que je peaufine ce "style" !)
Juste en passant et s'il y aurait une prochaine fois,
en dehors de rￜfￜrence ￜ ce que nous nous serions dit :
- je n'aime pas les images sur les pages web
Disons : quand nombreuses ou inutiles (telles que pour faire "joli")
- je suis avec une connexion ADSL lente et pense n'ï¿œtre pas le seul
(ce qui ne peut que continuer ￜ me pousser dans mon aversion de
chargement de cosmï¿œtiques bien inutiles en regard du rï¿œel contenu)
- ￜa continue ￜ m'ￜnerver quand je crois comprendre que l'on espￜre
reproduire sur des pages web ce qu'on peut faire en imprimerie.
(quand on sait le temps que ï¿œa prend chez les ï¿œditeurs+imprimeurs,
les rï¿œglages, tirages d'essais, alors qu'on est maï¿œtre de son
matￜriel, comment espￜrer arriver ￜ un rￜsultat approchant en
html+css sur un support inconnu (ordi + systï¿œme + navigateur) ?)
Pour exemple :
- la fameuse lettrine :
Sur une mï¿œme machine, ou pire sous systï¿œmes diffï¿œrents, et avec
diffￜrents navigateurs, pas tous rￜglￜs ￜ l'identique, sans parler
de l'apparence ce cette lettrine (bien sï¿œr diffï¿œrente), la cï¿œsure
rï¿œsultante du reste du paragraphe est trï¿œs diffï¿œrente allant
jusqu'ￜ des affichages trￜs inesthￜtiques.
- La vidï¿œo du bas de ta maquette :
je n'ai pu la visualiser tant ï¿œa coupe tout le temps
(patientￜ un bon moment pour n'en voir qu'un court extrait)
--
sm
Nikita Calvus-Mons
> Lￜ je reￜois la monnaie de ma piￜce.
>
> Bon ... peut-ￜtre va t-on apprendre ￜ se connaitre, et saura t-on passer
> par dessus des impressions ?
Pas de souci. Une bonne gueulante de temps en temps, ï¿œa soulage ! ;-)
> Je n'ai malheureusement pas un style de rï¿œponse ... "trï¿œs heureux".
> Pourtant je les voudrais bon enfant.
> En tous cas c'est sans mￜchancetￜ.
Bon, tant mieux, enterrons la hachette.
> Juste en passant et s'il y aurait une prochaine fois,
> en dehors de rￜfￜrence ￜ ce que nous nous serions dit :
> - je n'aime pas les images sur les pages web
> Disons : quand nombreuses ou inutiles (telles que pour faire "joli")
Tout est relatif dans ce domaine, non ?
> - je suis avec une connexion ADSL lente et pense n'ï¿œtre pas le seul
> (ce qui ne peut que continuer ￜ me pousser dans mon aversion de
> chargement de cosmï¿œtiques bien inutiles en regard du rï¿œel contenu)
Ben oui mais le "rï¿œel contenu" pour une revue (imprimï¿œe ou en ligne)
d'orientation littï¿œraire et/ou artistique, il faut bien comprendre que
ï¿œa inclut des images assez souvent. Et franchement le poids d'une
illustration ou deux, bien compressï¿œes, mï¿œme pour de l'ADSL "lent", est
dï¿œrisoire...
> - ￜa continue ￜ m'ￜnerver quand je crois comprendre que l'on espￜre
> reproduire sur des pages web ce qu'on peut faire en imprimerie.
> (quand on sait le temps que ï¿œa prend chez les ï¿œditeurs+imprimeurs,
> les rï¿œglages, tirages d'essais, alors qu'on est maï¿œtre de son
> matￜriel, comment espￜrer arriver ￜ un rￜsultat approchant en
> html+css sur un support inconnu (ordi + systï¿œme + navigateur) ?)
Ben grￜce ￜ CSS justement, sans trop de souci. Tu confonds faire une
mise en page propre avec vouloir reproduire un magazine ￜ 100%. Personne
ne confond, en tout cas pas moi. De toute faï¿œon, en tout, pour faire
propre, il faut y passer du temps.
> Pour exemple :
> - la fameuse lettrine :
> Sur une mï¿œme machine, ou pire sous systï¿œmes diffï¿œrents, et avec
> diffￜrents navigateurs, pas tous rￜglￜs ￜ l'identique, sans parler
> de l'apparence ce cette lettrine (bien sï¿œr diffï¿œrente), la cï¿œsure
> rï¿œsultante du reste du paragraphe est trï¿œs diffï¿œrente allant
> jusqu'ￜ des affichages trￜs inesthￜtiques.
Oui, mais ce n'est pas la faute de la lettrine ; ï¿œa se passe
rï¿œguliï¿œrement avec tous types de textes selon la largeur des colonnes
entre autres. Ce n'est pour le coup quasiment pas gï¿œrable !
> - La vidï¿œo du bas de ta maquette :
> je n'ai pu la visualiser tant ï¿œa coupe tout le temps
> (patientￜ un bon moment pour n'en voir qu'un court extrait)
C'est du YouTube, je l'ai virï¿œe de la maquette, elle est inutile. Cela
dit en total HC je te recommande ce type, Eddie Izzard. ;-)
A+
N.
SAM
> SAM a ï¿œcrit :
>>
>> - je n'aime pas les images sur les pages web
>> Disons : quand nombreuses ou inutiles (telles que pour faire "joli")
>
> Tout est relatif dans ce domaine, non ?
Voilￜ, et je suis vite hￜrissￜ par certains "relativismes".
(Faut le savoir)
>> - ￜa continue ￜ m'ￜnerver quand je crois comprendre que l'on espￜre
>> reproduire sur des pages web ce qu'on peut faire en imprimerie.
>
> Ben grￜce ￜ CSS justement, sans trop de souci. Tu confonds faire une
Non, non, je ne confonds rien, mais d'aucuns oui :-(
> Personne ne confond,
Pas sï¿œr ...
> en tout cas pas moi.
Notￜ.
>> Pour exemple :
>> - la fameuse lettrine :
>
> Ce n'est pour le coup quasiment pas gï¿œrable !
Voilￜ.
> en total HC je te recommande ce type, Eddie Izzard. ;-)
Quand il parlera franï¿œais ? (et qu'il passe en Languedoc)
La vidï¿œo n'ï¿œtait pas sous-titrï¿œe, j'ai rien compris.
Pourtant il a l'air d'avoir une bonne diction.
PS : je ne mets jamais de formules de politesse dans les rï¿œponses.
(elles sont intrinsï¿œques)
--
sm