Mettre un titre en image: le retour

Bonjour à tous,

Toujours dans cette même problématique de créer un titre en image en restant valide et accessible, mais aussi en gardant un code propre et une sémantique optimale, j'ai testé une solution simple et efficace qui semble élégante et fonctionnelle.

Je suis d'ailleurs étonné de n'avoir vu cette technique nulle part ailleurs, méthode pourtant basique.

L'idée est basée comme d'habitude sur un arrière-plan graphique et un décalage du texte, la différence étant qu'elle ne demande aucun ajout de balises (span ou autres) et qu'elle est très simple à mettre en place (par rapport à la méthode du logo clippé par exemple). Pour l'exemple, mettons que notre image mesure 200px de large et 50 de haut. En gros, ça donnerait quelque chose comme ceci:

[b][#black]HTML[/#][/b]
<h1>Titre de section</h1>

[b][#black]CSS[/#][/b]
h1 {background:url(image.png); width:0; height:50px; padding-left:200px; overflow:hidden;}

Qu'en pensez-vous? La technique existe probablement déjà, mais je n'ai honnêtement jamais vu un site l'utiliser ou même en parler.

Cordialement,
Benjamin

salut,

je trouve ca propre. et simple.
le seul probleme a mon avis, c'est si tu veux que ton h1 soit cliquable pour faire un retour a l'accueil du site (comme souvent ...)

opi

Hello,

Quel est l'avantage par rapport à la méthode du text-indent ?

Ouaips ça marche bien, mais je reprend les mêmes questions que Eldebaran et Opi :

Quelle est la différence avec un text-indent et comment faire pour rendre l'image cliquable ?

Hum a écrit :
Quelle est la différence avec un text-indent et comment faire pour rendre l'image cliquable ?

En fait, si l'on applique le style sur le lien (à condition bien sûr de le faire passer en "display: block;"), l'image devrait être cliquable.
Modifié par Eldebaran (03 Dec 2006 - 19:54)

Bon sang mais c'est bien sur !

Salut.

On parle bien d'une image portant un logo ou le titre de la section ?

Auquel cas il me semble que la solution la plus propre et la plus logique reste de mettre l'image en dur dans le code html, avec un texte alternatif approprié :

<h1><img src="image.png" alt="Titre de section" /></h1>

J'ai loupé quelque chose ?

Sopo a écrit :
Auquel cas il me semble que la solution la plus propre et la plus logique reste de mettre l'image en dur dans le code html, avec un texte alternatif approprié :

<h1><img src="image.png" alt="Titre de section" /></h1>

C'est vrai.

Mais dans le cas où l'on veut pouvoir proposer plusieurs feuilles de style avec lesquelles l'image n'est pas la même (ce qui est cohérent dans le cas d'un remplacement de texte) ? Ou dans le cas d'un effet de survol avec une seule image pour les deux états ?
Modifié par Eldebaran (03 Dec 2006 - 20:26)

Eldebaran a écrit :
Mais dans le cas où l'on veut pouvoir proposer plusieurs feuilles de style avec lesquelles l'image n'est pas la même (ce qui est cohérent dans le cas d'un remplacement de texte) ? Ou dans le cas d'un effet de survol avec une seule image pour les deux états ?

C'est vrai que dans ces cas-là, on peut avoir besoin d'une alternative.

Mais c'est la meilleure solution, au niveau sémantique. Une image portant un titre représente un contenu, et doit donc se trouver dans le code html, accompagnée de son alternative textuelle.

Vouloir créer un effet de rollover avec la même image, pourquoi pas. Mais il est aussi possible d'obtenir l'effet avec javascript, sans toucher au code html (et en préchargeant la seconde image si nécessaire). Idem pour les feuilles de style multiples, on peut utiliser du javascript (ou un langage côté serveur) pour modifier la source de l'image

Sopo a écrit :
Vouloir créer un effet de rollover avec la même image, pourquoi pas. Mais il est aussi possible d'obtenir l'effet avec javascript, sans toucher au code html (et en préchargeant la seconde image si nécessaire).

Oui, mais ça ne permet pas d'utiliser la technique des sprites, qui est très rigolote (bon OK, c'est plus un problème technique que sémantique, mais c'est quand même bien pratique).

Sopo a écrit :
Idem pour les feuilles de style multiples, on peut utiliser du javascript (ou un langage côté serveur) pour modifier la source de l'image

Si la personne utilise son navigateur pour changer de style (ce qui n'est à ma connaissance pas très pratique pour l'instant), tu ne connaîtras pas la feuille de style utilisée au niveau du serveur. Avec Javascript par contre peut-être, mais cela signifie que si Javascript est désactivé, tu vas te retrouver avec une image qui n'a rien à voir avec le reste du design.

Solution très efficace, effectivement!

Eldebaran a écrit :
Quel est l'avantage par rapport à la méthode du text-indent ?

Personnellement, cette solution ne m'a jamais beaucoup plue de part son côté "pas très propre": on décale le texte très loin pour éviter d'apparaître, mais on ne le cache pas réellement. La solution proposée ici a justement ce mérite de cacher clairement le texte proprement et ce, dans tous les cas.

Pour ce qui est des images insérées en dur directement, c'est naturellement pour moi la solution a utiliser lorsqu'il s'agit d'un logotype de société par exemple, mais pas pour des titres où l'image ne fait que rendre ceux-ci de manière plus élégantes. C'est par ailleurs ce que Laurent Denis en dit dans son billet Mettre un titre en image et rester accessible:

a écrit :
Une image de logo peut tout à fait avoir sa place dans le contenu (X)HTML (logo d'une entreprise en page d'accueil, par exemple) ou avoir un rôle plus décoratif relevant de la seule présentation (Rappel graphique dans le reste du site).

Très belle méthode, donc, selon moi.
Modifié par adoptme (03 Dec 2006 - 22:06)

Il me semble qu'on parle ici de contenu, justement. Une image dont le texte de remplacement est le titre de la section n'entre AMHA pas dans le cadre de la "seule présentation".

Je ne vois d'ailleurs pas comment on justifierais l'emploi d'une balise de titre, s'il s'agissait de présentation ...
Modifié par Sopo (03 Dec 2006 - 21:59)

Salut,

Eldebaran a écrit :

Mais dans le cas où l'on veut pouvoir proposer plusieurs feuilles de style avec lesquelles l'image n'est pas la même (ce qui est cohérent dans le cas d'un remplacement de texte) ?

Oui 1000 fois oui !

C'est bien ainsi que les choses se posent.

Toute personne qui expérimente les css en accompagnant cela d'un styleswitcher (au passage le meilleur outil pédagogique concernant les feuilles de style) le dira.

Sopo a écrit :

Mais c'est la meilleure solution, au niveau sémantique. Une image portant un titre représente un contenu, et doit donc se trouver dans le code html, accompagnée de son alternative textuelle.

Suis fatigué donc pas de nouveau débat. Néanmoins Sopo relit très soigneusement ta phrase. Ce que tu affirmes n'est pas fondé. Rien n'indique qu'un titre présent à l'écran comme image doit donner lieu à l'utilisation de <img> dans le code source. Cela est possible bien sur et ce la ne pose aucun problème mais ce n'est pas du tout une obligation.

La question n'est pas de l'ordre de la pertinence du codage html mais ne concerne que l'accessibilité et se formule ainsi et seulement ainsi :

Si la solution css mise en oeuvre pour cacher un texte et lui substituer une image background résiste à la situation suivante :
. la feuille de style est interprétée.
. les images ne sont pas chargées.

alors c'est sans doute bon (évidemment mieux vaut rester prudent, comme à chaque fois qu'il s'agit d'accessibilité).

Sinon l'alternative de l'image dans le html doit être clairement envisagée.
Modifié par clb56 (03 Dec 2006 - 22:14)

Je ne dis pas le contraire. Mais ça reste (ou doit rester) un cas particulier, et je maintiens qu'il y a là une petite entorse à la séparation contenu/mise en forme

En règle générale, comme évoqué dans le post de benjamin, l'image en dur me semble simplement plus logique et plus économique.

... et si l'on parlait plutôt de la méthode en soi que de débattre si oui ou non, l'image doit être insérée directement en HTML — alternative qui réside d'ailleurs selon moi plus d'un choix personnel qu'autre chose (on voit bien ici que plus d'une personne préfère éviter de placer l'image en dur).
Modifié par adoptme (03 Dec 2006 - 23:12)

adoptme a écrit :
... et si l'on parlait plutôt de la méthode en soi que de débattre si oui ou non, l'image doit être insérée directement en HTML — alternative qui réside d'ailleurs selon moi plus d'un choix personnel qu'autre chose (on voit bien ici que plus d'une personne préfère éviter de placer l'image en dur).

Mais c'est ce qu'on fait. La méthode proposée n'est ni meilleure ni pire que les autres, je ne fais que poser la question de sa pertinence. A moins de vouloir réaliser l'un ou l'autre effet de style, comme évoqué plus haut, je ne comprends pas pourquoi on voudrait cacher le texte et passer l'image en background.

Je connais cet article de Laurent Denis, et si tu relis la conclusion, tu verras que l'image en dur reste encore la méthode la plus sûre du point de vue accessibilité ...

Sopo a écrit :
La méthode proposée n'est ni meilleure ni pire que les autres

Justement, je pense qu'elle l'est, meilleure. Plus propre que le text-indent et autres span, plus facile à mettre en place que le clip par exemple.

Sopo a écrit :
je ne fais que poser la question de sa pertinence.

Là, c'est un autre débat

Bon, passons. Que se passe-t-il si l'image est inaccessible ?

Sopo a écrit :
Que se passe-t-il si l'image est inaccessible ?

La même chose qu'avec toutes les autres techniques de titres en images en css Non, plus sérieusement, pourquoi l'image ne serait-elle pas accessible?
Modifié par adoptme (03 Dec 2006 - 23:53)

Pour n'importe quelle raison ... un soucis quelconque sur le serveur ou sa configuration, par exemple. Ou si l'utilisateur a modifié l'affichage des images d'arrière-plan ...