webdesign Comment afficher un titre dans un espace doublement indenté comme celui-ci ?
Dans cet article nous verrons comment réaliser ce titre. Si vous pensez que ça n'a aucun intérêt, je dirais que ça n'a que l'intérêt que vous voudrez bien y chercher, de plus cet exercice est surtout un prétexte pour présenter 2-3 réflexions sur la pratique du webdesign qui dépassent le cadre des CSS.
"Mais c'est moche ton truc !"
Peut-être, c'est discutable en tout cas. Mais je ne présente que la technique de base, ce que l'on peut faire de ces espaces dégagés n'est limité que par notre imagination.
Le but est donc d'obtenir un titre h1 présentant cette indentation particulière. Mais sans contraintes ce serait un peu trop facile, n'est-ce pas ? Nous devrons donc éviter de rajouter des structures englobantes, inutiles ou non sémantiques. Nous nous passerons aussi de la balise br/ sinon ce ne serait pas drôle — mais je reviendrai sur son cas plus avant.
La structure de base et les styles sont plus que sommaires :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Comment afficher un titre dans un espace doublement indenté comme celui-ci ?</title>
<style>
h1 {
background : #555;
color: #ddd;
padding: 0 ;
margin: 70px auto 0 auto; /* juste pour le décoller du haut et le centrer */
width:615px;
}
</style>
</head>
<body>
<h1>Comment afficher un titre dans un espace doublement indenté comme celui-ci ?</h1>
</body>
</html>
Qui peuvent bien être ces envahisseurs d'espaces ?
Faut arrêter la parano
Le cas de l'espace bas-gauche est le plus facile à régler. Visuellement nous avons juste un décalage de la première ligne par rapport à la seconde. Pas la peine de chercher un envahisseur ici ! En appliquant un padding-left on décale les 2 lignes vers la droite et une indentation négative fera reculer la première ligne dans l'espace du padding, exemple.
padding: 1em 25px 1em 85px ; /* le padding gauche est de 85px, les autres c'est pour l'esthétique générale */ text-indent: -60px; /* le texte se décale vers la gauche */
La menace vient de l'intérieur
Le deuxième cas semble bien plus problématique par rapport aux contraintes données. Comment ferions-nous si elles n'existaient pas ? Le br/ ? Non non toujours pas, c'est pour après je vous dis.
Il n'y a pas 36 solutions, surtout des simples. Pensez aux trous noirs. Ils sont invisibles mais perceptibles par l'influence qu'ils ont sur la lumière. Ici aussi nous avons une sorte de trou noir, quelque chose est là et le titre en est conscient. Ca exclu déjà un "quelque chose" qui serait positionné en absolute. Ce positionnement étant hors-flux notre "quelque chose" serait tout aussi inconscient de son environnement que son environnement le serait de lui.
Le "quelque chose" est placé contre les marge internes (le padding) haut-droit, un élément flottant à droite et invisible ferait un coupable idéal. En rajoutant au début du h1 un élément avec les propriétés ci-dessous on obtient ceci. Il suffit de le rendre invisible avec la propriété visibility pour avoir le résultat désiré.
Bon je n'en ai pas parlé explicitement dans les contraintes mais ajouter un élément pour le rendre purement et simplement invisible est une méthode plus que discutable. Tout élément que l'on met dans la structure code doit avoir une raison d'y être et cela indépendamment du design.
- Ouais mais c'est impossible ton truc en fait vu qu'on ne peut rien rajouter!
Ah mais je n'ai pas dit ça, regardez donc le lien suivant. (/me pouffe dans sa barbe)
"Escroc ! tricheur ! toquard !"
Calmez-vous... vous n'attendiez pas de moi une leçon de CSS digne d'un gourou quand même, si ? Je concède que l'on puisse trouvé le procédé fallacieux mais regardez le code, respirez profondément et prenez deux minutes pour revoir le cadre d'utilisation et les contraintes, puis lisez la suite car c'est loin d'être fini.
h1 strong {
width: 160px;
background-color: #555;
text-indent: 0; /* pour recaler le texte par rapport à son fond */
text-align: center; /* on centre le texte dans l'espace */
float: right;
position: relative;
bottom : 2.5em; /* on décale le texte et son fond vers le haut */
}
Le point faible de cette méthode c'est que le cadre ajouté est contraint dans un espace limité alors que le texte ne l'est pas car il est contenu dans un flottant, mais avec un peu d'imagination je suis certain que l'on peut trouver des effets intéressants...
Out of the box
Tout comme la plupart d'entre vous (je suppose), je me suis retrouvé bloqué par les contraintes... tant que j' ai envisagé le problème sous un angle purement technique.
Mais le design n'a qu'une fonction, celle d'enrichir et de servir ce qui importe vraiment : le contenu. J'ai donc réfléchi sur le contenu en posant le problème à l'envers : comment l'enrichir tout en ouvrant des possibilités de design ?
La "catégorie" préfixant le titre lui apporte une précision et sémantiquement on ne peut lui refuser une emphase (ici strong, mais em peut est envisageable). On peut considérer la catégorie comme un mot-clé important dans un titre et qui apporte un avantage en SEO si il est repris pour le <title> de la page comme c'est souvent le cas.
Vous n'avez pas oublié la parenthèse inutile j'espère. C'est à travers elle que l'on peut percevoir le pouvoir du contenu sur le design, et par là-même les limites de la balise br et les lacunes des CSS.
Css is not Design
"Tout élément que l'on met dans du code doit avoir une raison d'y être et cela indépendamment du design."Vous n'avez pas oublié cette phrase ?... et bien elle est fausse.
C'est ce que j'avais retenu en lisant certains gourous... pourtant sur le mémento XHTML de Raphaël Goetter il est bien écrit : <br />Force un saut de ligne. L'affichage se poursuit en début de ligne suivante. Afin d'éviter l'usage abusif de cette balise, il est préférable d'utiliser les propriétés de marge en CSS.
Soucieux de produire des pages séparant bien le contenu du style, j'ai inconsciemment transformé une recommandation en interdiction formelle, je me suis mis des oeillères tout seul.(rien d'utile entre ces paranthèses ?)
Une belle erreur de débutant !
Il n' y a qu'un cas où l'on ne peut remplacer cette balise par du CSS, c'est quand on veut insérer un saut de ligne à l'intérieur d'un élément. Pourquoi voudrait-on faire une telle chose ? Simplement pour contrôler la répartition de son texte. C'est la seul balise HTML qui demeure liée au design dans ce cadre d'utilisation et qui n'a pas d'alternative CSS.
Dans le cas de notre titre elle (la balise br) peut être utile pour ajuster le retour créé par notre space-invaders. Elle est aussi un moyen simple de mettre une phrase en exergue en fin de paragraphe. Et c'est la seul qui permette de contrôler la silhouette d'un paragraphe (hors justification du texte).
Dire qu'il est illusoire de vouloir contrôler totalement l'affichage des pages web sur les navigateurs des internautes, qu'on ne doit pas le faire de toute façon, que le web ce n'est pas le papier,... ça peut-être aussi être un bon prétexte pour se simplifier la tâche : c'est pas ma faute c'est la faute du web.
On peut pourtant contrôler un minimum les choses. Un design élastique garanti un respect des paragraphes. Même un design fixe affichant un corps de police suffisament gros (la taille par défaut des navigateurs est de 16px, ce n'est pas gros), aura peu de raison d'être redimensionnée normalement.
Conclusion
Vous vous souvenez de la parenthèse inutile je suppose. Retournez à ce passage et imaginez qu'elle ne soit pas là. Ne trouvez-vous pas que la forme du paragraphe serait disgracieuse ? Quoiqu'il en soit le "problème" visuel a été réglé comme dans mon titre, en retravaillant le contenu.
Rappelez-vous que le plus simple pour designer un contenu, c'est parfois de changer le changer. Un simple retour à la ligne, quelques mots en plus, ou en moins, sont parfois les seuls recours à un problème esthétique. Si vous avez pouvoir sur le contenu, ne le laissez pas de côté
Tant que les outils web ne permettront pas de gérer précisément les orphelines, les veuves, les césures, la justification verticale et toutes ces choses qui demeurent la force de la PAO, ce design par le contenu restera anecdotique. C'est pour moi une raison pour y penser dès maintenant.