Ready For Web

Un titre flexible avec font-size en vw

Petite expérimentation d'affichage de texte en pleine largeur de son contenu (ou de l'écran).

Au niveau des CSS, tout passe si vw passe, autant dire que c'est "ready for web".

En ce qui concerne cette méthode, toutes les largeurs de conteneurs doivent être définies en fluide, sans max-width, sauf à fixer font-size en px (ou em, rem, ...) dès que la max-width est dépassée. Les medias-queries sont là pour ça.

On ne confondra pas avec du texte justifié, qui nécessite plusieurs lignes.

Contraintes:

  1. En rouge: même nombre de caractères, pas la même largeur => ça ne va pas, il faut une police "monospace".
  2. En orange: en police "monospace", la taille du texte ne dépend plus des caractères, uniquement de leur nombre. Il faut maintenant régler la taille des caractères pour prendre toute la largeur ...
  3. En jaune: on se dit que c'est bien ... sauf que la police est une police système, un autre système en affichera probablement une autre et les réglages n'iront plus. Il faut une police monospace @font-face.
  4. En vert, tout va bien: police "monospace" @font-face, réglages idoines pour cette police. Le max-width est géré en passant de font-size en vw à font-size en em (par exemple).

Hello world

Hwp Hwp Hwp

Hello world

Hwp Hwp Hwp

Hello world

Hwp Hwp Hwp

Hello world

Hwp Hwp Hwp

Sur toute la largeur:


<div class="foule-ouidze">

<p>Un titre sur toute la largeur</p>

</div>

.foule-ouidze {width: 100vw; max-width: 1000px; color: white; text-align: center; margin: 0 auto; font-family: monospace; font-family: 'fantasque_sans_monoregular';}

.foule-ouidze p {font-size: 6.2vw; background: turquoise;}

@media screen and (min-width: 1000px) {

	.foule-ouidze p {font-size: 4em;}

}

Un titre sur toute la largeur

Remarque:

Un effet indésirable à width: 100vw, l'apparition d'un ascenseur vertical implique l'apparition d'un ascenseur horizontal de 16px ... ce qui n'est pas le cas pour width: 100%. Ma démo ne rencontre pas ce problème mais si vous voulez être en pleine largeur, c'est à anticiper: on remplace par 100%.


.foule-ouidzep {width: 100%; max-width: 1000px; color: white; text-align: center; margin: 0 auto; font-family: monospace; font-family: 'fantasque_sans_monoregular';}

.foule-ouidzep p {font-size: 6.2vw; background: darkturquoise;}

@media screen and (min-width: 1000px) {

	.foule-ouidze p {font-size: 4em;}

}

<div class="foule-ouidzep">

<p>Un titre sur toute la largeur</p>

</div>

Un titre sur toute la largeur

Sinon en profitera plus tard pour aller voir vh, vmin et vmax.