Une lettre sur deux en gras

Bonsoir,

Est il possible d'écrire une lettre sur deux en gras dans une balise <div> via le css?

Si oui peut-on éclairer ma lanterne?

Merci d'avance.

(j'ai essayé de trouver sur la toile , résultat: bredouille)

Bonsoir,

Voilà ce que je te propose pour pallier ton problème.

Tu peux utiliser des balises <span></span>, leur appliquer une classe et une propriété css comme ceci :

<div class="texte">
		<p>T<span class="gras">e</span>s<span class="gras">t</span>.</p>
</div>

et pour la feuille de style :

span.gras {
	font-weight: bold;
}

Ce code fonctionne et est valide mais, c'est mon avis, je trouve qu'il "bourre" un peu le code de la page.

Sinon, tu peux aussi procéder comme suit :

<div class="texte">
    <p>T<strong>e</strong>s<strong>t</strong>.</p>
</div>

Voilà .

Je te remercie fort bien, je pense que la seconde méthode est la meilleure.

Salut,

J'aurais tendance à penser que la première solution me semble plus appropriée même sans connaître la finalité de ce principe. J'imagine -peut être- qu'il s'agit d'une énumération alphabétique de lettres pour un index par exemple (?).

De ce que j'en comprends, il ne s'agit surtout que d'une mise en évidence visuelle, donc le span+classe me semblerait plus logique que le strong, car sémantiquement, je ne suis pas persuadé qu'il soit nécessaire de mettre une lettre plus en avant qu'une autre.

Mais bien sur tout dépend de cette finalité réelle de ce que tu cherches à faire.
Modifié par Mikachu (09 Jan 2010 - 20:48)

Mikachu a écrit :
Salut,

J'aurais tendance à penser que la première solution me semble plus appropriée même sans connaître la finalité de ce principe. J'imagine -peut être- qu'il s'agit d'une énumération alphabétique de lettres pour un index par exemple (?).

De ce que j'en comprends, il ne s'agit surtout que d'une mise en évidence visuelle, donc le span+classe me semblerait plus logique que le strong, car sémantiquement, je ne suis pas persuadé qu'il soit nécessaire de mettre une lettre plus en avant qu'une autre.

Mais bien sur tout dépend de cette finalité réelle de ce que tu cherches à faire.

Je suis d'accord avec ça... Après, espérons qu'il ne s'agit pas d'un texte de 300 lignes à taper à la main

J'espère qu'il s'agit plutôt de ce que j'ai évoqué, car un texte totalement écrit avec une lettre sur deux en gras serait parfaitement désagréable à lire, pour peu qu'il reste même lisible !

Ça dépend effectivement de ce dont il s'agit.

Réaliser cet effet sur des mots serait catastrophique:
- ce serait douteux graphiquement;
- ça poserait des problèmes d'accessibilité (mots lus lettre à lettre par une synthèse vocale).

Par contre pour une série d'éléments tels que des liens ou des LI (ou autre balisage pertinent), ça peut être intéressant. Et ça se gère en CSS3 avec le sélecteur suivant:

element:nth-child(2n+1) {...} /* Éléments impairs */
element:nth-child(2n+0) {...} /* Éléments pairs */

Ou plus simplement avec des alias qui vont bien:

element:nth-child(odd) {...} /* Éléments impairs */
element:nth-child(even) {...} /* Éléments pairs */

Le petit problème, du coup, c'est que les versions actuelles d'Internet Explorer n'y pannent rien. J'ai bon espoir pour la version 9, mais pour 6-8 c'est cuit. Il n'y a plus qu'à rajouter une classe à un élément sur deux, quoi.

Mikachu a écrit :
J'espère qu'il s'agit plutôt de ce que j'ai évoqué, car un texte totalement écrit avec une lettre sur deux en gras serait parfaitement désagréable à lire, pour peu qu'il reste même lisible !

Entièrement d'accord.

Il s'agit de quelques mots écrits par ci par là sur la page en "décoration", heureusement, comme j'ai pu lire, ce n'est pas un texte de 300 lignes à taper, ce serait ignoble à taper et à lire.
Merci de vos conseils.

kyubidog a écrit :
Il s'agit de quelques mots écrits par ci par là sur la page en "décoration", heureusement, comme j'ai pu lire, ce n'est pas un texte de 300 lignes à taper, ce serait ignoble à taper et à lire.

À tout hasard et pour rappel, écrire "<span>m</span>o<span>t</span>" à la place de "mot" rend le texte non accessible. C'est une pratique à éviter.