Lettrine ::first-letter

Bonjour,

J'ai une lettrine dans un texte en css. Pas de souci ça fonctionne bien avec chrome et IE. Mais sur Fox cela ne fonctionne pas. Aurez-vous une astuce ? J'ai beau à mettre -moz- sur les éléments mais il y a rien qui s'affiche....

Voici mon code de base pour la lettrine:

.two-columns::first-letter{
    color: #292929;
    float: left;
    font-size:60px;
    font-weight:bold;
    line-height:40px;
    padding-top:4px;
    padding-right:4px;
    font-family: arial;	
}

Bonjour,

Peux-tu être un peu plus détaillé que "il y a rien qui s'affiche...." , mettre un lien vers ta page/afficher une copie d'écran/communiquer ton code CSS et hTML ?

Sinon, je constate que ta règle "font-family: arial" comporte le nom "arial" sans majuscule, Or, le CSS est case-sensitive. peux-tu écrire "font-family: Arial" ?

Ou alors, peux-tu écrire "font-family: "Arial Bold"" et supprimer le "font-weight:bold;" (quoique le problème ne me semble pas être là) ?

Sinon, j'ai le problème inverse: j'ai une lettrine sur Firefox mais pas sur Vivaldi

Sinon, ton line-height n'est-il pas un peu petit pour ta taille de police ?
Modifié par thierry (22 May 2019 - 16:00)

Salut,

Ton code marche bien pour moi sur Chrome et FF.

Et sur Can i use c'est marqué comme supporté depuis la version 3.5 : https://caniuse.com/#search=first-letter

thierry a écrit :
...Or, le CSS est case-sensitive.

Sûr ?
Si j'en crois le W3C :
All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML, they are case-sensitive. Case sensitivity of namespace prefixes is defined in [CSS3NAMESPACE].

Bonjour,

est-ce que ta CSS est valide dans http://jigsaw.w3.org/css-validator/ , dès fois qu'un navigateur ne lise pas correctement cette règle à cause de quelque chose qui précède…
Est-ce que tu cibles l'élément ayant un nœud texte ou bien est-ce un ancêtre de cet élément (ça ne devrait pas influer mais pour déboguer je tenterais ça).

<div class="two-columns">
  <div>
    <p>
      <span class="has-textnode">Le texte</span>

Si tu enlèves le pseudo pour ne garder que .two-columns comme sélecteur, est-ce que ça s'applique ?
Et en ne gardant que le pseudo (donc équivalent à *::first-letter )
EDIT : en enlevant float: left aussi ?
Que voient les DevTools ? Dans Firefox il faut ouvrir "Pseudo-éléments" avant "Cet élément" dans le 2e panneau de l'Inspecteur (s'il n'y a rien, mauvais signe).

Sinon :first-letter est reconnu depuis tout le temps et ::first-letter quelques années. Avant Firefox 3.5 c'est une histoire de ce qu'est la 1ère "lettre". Ça peut être plusieurs caractères m'enfin avec des mots sans ponctuations pas de souci.
Modifié par Felipe (23 May 2019 - 14:26)