[Résolu] CSS - Mise en forme de Lettrine

Bonsoir à tous,

Je m'arrache les cheveux avec la propriété CSS lettrine:first-letter. En fait, la propriété en elle-même ne pose pas de soucis mais plus le rendu que je cherche à avoir.

Ici, vous verrez sur la première page, une tentative de mise en page sur la première lettre. Pour moi c'est ok (juste peut-être changer la police de caractère). Réside quand même un problème de taille, le L n'est pas placé correctement (sans blagues ?). Il faut bien sûr le remonter pour qu'il prenne sa place.

J'ai essayé tout un tas de choses, mais rien à faire. En général il reste là, tel un piquet inamovible. Y'aurait-il, dans l'assemblez, une âme charitable pour m'aider ?

Tant que j'y suis, un autre problème... J'essaye d'ajouter plus d'espace entre les lignes (pas toutes, juste avec les nouveaux paragraphes). Là aussi, impossible. Il y'a bien la balise <br /> mais là, il me génère trop d'espace. Et encore là, j'ai essayé pleins de trucs mais toujours pareil... La première chose était de changé la hauteur de ligne (mais rien ne change).

J'ai aussi remarqué un autre bug, sur les PC je n'ai pas la même police de caractère que sur mon Mac. Pourtant elle sort de chez Google Font. Voilà, en gros

Merci pour vos réponses.
Modifié par MagicCarpet (03 Dec 2012 - 22:13)

Bonjour,

Étant sur smartphone je peux difficilement voir ton code, mais il est à fait normal que sur mac et Windows le rendu de ta police ne soit pas la même, le moteur de rendu n'est pas le même, donc tu n'obtiendra jamais un rendu identique.

Bonjour,

Ça vient du fait que tu as réduit sa hauteur ( 20px ) sans réduire son interlignage. Ajoute :

line-height: .3;

et ça devrait aller mieux. Tu pourras bien sûr régler le line-height pour affiner ton résultat.


Bonne continuation !

rs459 a écrit :
Bonjour,

Étant sur smartphone je peux difficilement voir ton code, mais il est à fait normal que sur mac et Windows le rendu de ta police ne soit pas la même, le moteur de rendu n'est pas le même, donc tu n'obtiendra jamais un rendu identique.

Je n'ai pas précisé un truc essentiel. Je test sous Mac avec Google Chrome et le même navigateur sous Windows. Pourtant la police n'est pas la même. C'est cela que je ne comprends pas.

Quelqu'un peut m'indiquer ce que je dois faire ? Parce que je viens de vérifier et effectivement ce n'est pas du tout la même chose. Du coup, la mise en page n'est bien sûr pas la même.

Merci à vous.
Modifié par MagicCarpet (25 Nov 2012 - 22:34)

Ten a écrit :
Bonjour,

Ça vient du fait que tu as réduit sa hauteur ( 20px ) sans réduire son interlignage. Ajoute :

line-height: .3;

et ça devrait aller mieux. Tu pourras bien sûr régler le line-height pour affiner ton résultat.


Bonne continuation !

Super c'est nickel. Par contre, pour avoir un peu plus d'espace entre les lignes. Si je met des <br />, comment puis-je modifier la hauteur de ligne ? Parce que les line-height ne fonctionne pas... Merci à toi.

EDIT : en fait je viens de refaire un test, ça fonctionne uniquement si on met des grandes valeurs (genre 200px). Avec des petites valeurs (8px), on ne peut pas descendre en dessous d'un certain seuil.
Modifié par MagicCarpet (25 Nov 2012 - 21:48)

MagicCarpet a écrit :


Je n'ai pas précisé un truc essentiel. Je test sous Mac avec Google Chrome et le même navigateur sous Windows. Pourtant la police n'est pas la même. C'est cela que je ne comprends pas.

J'avais bien compris, il faut savoir que tous les systèmes Windows utilisent un système de rendu des polices différent, et que le rendu sous mac est différent. Certaines polices de mauvaises qualité d'ailleurs sont sensiblement différentes d'un système à l'autre.

Pour ton interlignage, tu n'as pas à mettre de <br /> si ton bloc est correctement formaté ( i.e. avec une largeur définie ) car ton texte reviendra à la ligne naturellement. Line-height est précisément fait pour gérer les interlignes, donc si tu truandes en utilisant autre chose c'est mauvais signe.

Pour comprendre le rendu des typos, un excellent livre est paru et tu as même un compte-rendu de lecture sur Alsa. Il est très pointu mais je le recommande chaudement !

rs459 a écrit :


J'avais bien compris, il faut savoir que tous les systèmes Windows utilisent un système de rendu des polices différent, et que le rendu sous mac est différent. Certaines polices de mauvaises qualité d'ailleurs sont sensiblement différentes d'un système à l'autre.

Ok, merci. Mais dans ce cas, et si je comprends bien... Je n'ai pas vraiment d'autre choix que de changer de police ? Parce que sur Windows je trouve que l'actuelle est vraiment dégradé par apport à ce que j'ai sur Mac. Sans parler du fait que la mise en page est relativement modifier, elle pixellise grave. Et donc si je comprends bien (toujours), la police doit-être de mauvaise qualité et s'adapte mal. Est-ce bien ça ?

Ten a écrit :
Pour ton interlignage, tu n'as pas à mettre de &lt;br /&gt; si ton bloc est correctement formaté ( i.e. avec une largeur définie ) car ton texte reviendra à la ligne naturellement. Line-height est précisément fait pour gérer les interlignes, donc si tu truandes en utilisant autre chose c'est mauvais signe.

Pour comprendre le rendu des typos, un excellent livre est paru et tu as même un compte-rendu de lecture sur Alsa. Il est très pointu mais je le recommande chaudement !

Ca tombe bien, je vais avoir des sous de mon CE, donc je vais lire ce livre. Par contre, pour en revenir à ma question... J'ai mis des <br /> non pas pour 'forcer' un retour à la ligne. Mon bloc de texte est correctement définit, donc le texte reviens bien à la ligne quand c'est nécessaire. Par contre, si je veux faire un peu de place entre les paragraphes, comment puis-je faire ? Parce que j'ai essayé line-height (ou une autre propriété, je sais plus là sur le coup) et j'ai bien un espace plus important mais il se passe sur toutes les lignes. J'aimerais cibler un peu plus précisément cet interlignage.

Merci pour ta réponse en tout cas. (j'imagine que tu as lu ce livre sinon ?)

MagicCarpet a écrit :


Ok, merci. Mais dans ce cas, et si je comprends bien... Je n'ai pas vraiment d'autre choix que de changer de police ? Parce que sur Windows je trouve que l'actuelle est vraiment dégradé par apport à ce que j'ai sur Mac. Sans parler du fait que la mise en page est relativement modifier, elle pixellise grave. Et donc si je comprends bien (toujours), la police doit-être de mauvaise qualité et s'adapte mal. Est-ce bien ça ?

Pas forcément de mauvaise qualité, mais pas adaptée à du "heading". Si tu passes de osx à Windows xp IE6 le contraste sera toujours saisissant même avec bonne police.

Ensuite pour l'espacement de tes paragraphes il faut jouer sur les marges internes/externes (margin/padding)

MagicCarpet a écrit :
Par contre, si je veux faire un peu de place entre les paragraphes, comment puis-je faire ?

Pour reprendre l'idée de @Ten sur tes balises <br/> tu peux appliquer ce style à ta balise p:

p:nth-of-type(2) {
	margin: 21px;
	margin-bottom:21px;
}

Ça te permettra de t'affranchir de l'utilisation de la balise <br/> tout en respectant ta mise en page initiale.

rs459 a écrit :


Pas forcément de mauvaise qualité, mais pas adaptée à du &quot;heading&quot;. Si tu passes de osx à Windows xp IE6 le contraste sera toujours saisissant même avec bonne police.

Ensuite pour l'espacement de tes paragraphes il faut jouer sur les marges internes/externes (margin/padding)

Pour ce site je ne vais pas compter sur IE6. Par contre j'aurais une autre question. Qu'est-ce que tu appel pas adaptée à du 'heading' ? Je ne comprends pas.
En tout cas, j'ai essayé la même police en passant par un import, j'ai essayé aussi la version JavaScript et une autre police (mais toujours de chez Google). Toujours le même résultat. Par contre j'ai remarqué une chose. Au départ ma déclaration dans le CSS était :

font-family: 'Didact Gothic', sans-serif;

Je l'ai modifié par :

font-family: 'Didact Gothic', 'Comic Sans MS';

Et, surprises, le site sous Windows (mais toujours avec Chrome) m'affiche mon site avec la police de caractère Comic Sans MS. Donc au delà de la différence d'affichage, en fait il ne prends même pas en compte ma police 'personnalisé'.

Ai-je oublié quelque chose ?
Modifié par MagicCarpet (27 Nov 2012 - 22:38)

J'ai fais un essai avec Adobe Edge Web Fonts et ça fonctionne partout et correctement.
Quelqu'un aurait une idée de pourquoi avec Google Web Fonts c'est mort ?

Merci pour vos contributions.

Testé sur chrome (mac) = comic

Regarde de ce côté: optimiser-le-rendu-de-font

rodolpheb a écrit :
Testé sur chrome (mac) = comic

Regarde de ce côté: optimiser-le-rendu-de-font

Sur PC j'aurais compris mais sur MAC ???

Bref, j'ai lu complètement ton article (avec quelques liens connexes) et je dois dire qu'il est plutôt bien fait. Il cible bien le problème avec Chrome sous Windows et ClearType...

Du coup j'ai suivi la procédure. Si j'ai bien fait le boulot ça devrait marcher maintenant partout.

Peux-tu vérifier de ton côté ? Si d'autres peuvent regarder ça serais sympa aussi

Je vérifie de mon côté... Merci à tous pour votre aide !!!

EDIT : J'en ai rêvé, personne ne l'a fait !!! Plus sérieusement, ça ne marche toujours pas...
Je suis passé sur du Font-Face, j'ai suivi un tuto, vérifié mes sources mais toujours le même problème. Sous Google Chrome, avec Windows 8 ça switche sous la police Comic !!!
La police est toujours la même en provenance de Google Fonts mais passé sous FontSquirel et donc avec le FontFace placé dans le body... Si quelqu'un à une idée ? Parce que là, je sèche, j'ai passé deux heures ce matin là dessus, aucun changements.
Modifié par MagicCarpet (02 Dec 2012 - 12:15)

Depuis MAC: Rendu identique sur Safari et Chrome, Sur Firefox la police ou la graisse est plus importante.

safari

chrome

firefox

Modifié par rodolpheb (02 Dec 2012 - 16:44)

Bon, apparemment il y'avait un souci avec la déclaration du font-face et le nom de la police.
Ou un conflit entre le nom que j'avais écris et le nom de la police, enfin j'avoue que je n'ai pas trop compris mais ça marche. J'ai procédé à quelques modifications après avoir essayé facetype.js qui ne me convenais qu'a moitié et qui, de plus, ne fonctionné pas très bien.

La prochaine fois, je règlerais la font dès le début...

Merci en tout cas pour vos commentaires. N'hésitez pas à me donner votre avis général sur le site. Des trucs sont encore à régler, notamment pour IE mais ça avance.

Bonne fin de soirée à tous.

Merci pour cette discussion et la solution :
Extrait depuis le lien ici du premier billet :

<p class="lettrine br mozilla">Let us welcome you to our new web site gallery...

.lettrine:first-letter { font-family: Arial, sans-serif; font-size: 4em; font-weight: bold; float: left; padding: 16px; height: 12px; position: relative; line-height: 0.5; }

Ca a marché du premier coup.

rodolpheb a écrit :
Depuis MAC: Rendu identique sur Safari et Chrome, Sur Firefox la police ou la graisse est plus importante.

safari
upload/42874-safari.png
chrome
upload/42874-chrome.png
firefox
upload/42874-firefox.png

Non, si l'on regarde bien, il s'agit avant tout d'un problème de positionnement sous Firefox : celui-ci n'accepte pas la position en display:block avec ::first-letter, ce qui rend impossible une harmonisation de la mise en forme sous les différents navigateurs...

Mais si vous connaissez un hack ou une astuce css pour ce navigateur (sans mettre un span) je suis preneur.
Modifié par Olivier C (20 Sep 2013 - 07:09)