Open Time

Voilà un nouvel appeau à troll, je pense, dans la série « Le front s’oppose au back » !

Hier, en pleine réflexion sur la meilleure façon d’implémenter une police (taille et interligne) responsive pour la prochaine version de Dotclear, j’en étais arrivé à cette question, que j’ai posée à la fois sur Twitter et sur IRC :

Le back peut-il/doit-il être plus dense que le front ?

J’ai reçu deux réponses :

1. oui parce que tu ne t’assois pas sur ton front — @Moukmouk11 (réponse collector s’il en est)
2. non, l’utilisateur du back est le même que celui du front, il faut respecter son réglage — GoOz sur IRC

Parce qu’il y a deux possibilités :

1. On utilise la taille de police définie par l’utilisateur, 16 pixels (ou équivalent), dans la plus grande majorité des cas vu que les utilisateurs ne modifient qu’exceptionnellement ce réglage.
2. On utilise un pourcentage de cette taille afin de permettre un affichage plus dense, et par conséquent avec plus d’informations.

Dotclear 2.10

Sur Dotclear 2.10.n et précédents (au moins jusqu’à la version 2.6), on utilise une taille de base égale à 12px, obtenue avec ces deux règles :

html { font-size: 62.5%; }
body { font-size: 1.2rem; line-height: 1.5; }

La première règle, sur l’objet html permet de revenir à une taille de 10px, ce qui simplifie ensuite les calculs puisque les em de premiers niveaux sont multiples de 10px. La seconde règle positionne la taille de base à 1.2rem, soit 1,2 x 10px, donc 12px.

C’est donc avec cette taille de police qu’on administre depuis des années nos blogs respectifs. Au moins tant qu’il y a au moins un écran de largeur supérieur à 26.5em (c’est à dire 26,5 x 16px — la taille de police du navigateur — soit 424 pixels) :

@media screen and (max-width: 26.5em) {
	#wrapper { font-size: 1.4em; }
}

Sinon, donc sur petits écrans, on bascule sur une taille de police de 1.4em, soit 1,4 x 10px, donc 14px, pour l’affichage principal (qui exclut les menus et la barre supérieur d’état)

Pour résumer, pour l’instant on a :

• police de 12 pixels avec interligne 1.5 pour les écrans de largeur supérieure à 424 pixels
• police de 14 pixels avec interligne 1.5 pour les écrans de largeur inférieure ou égale à 424 pixels

Dotclear 2.11

Back traité comme le Front

Pour Dotclear 2.11, je me suis basé sur cet article de Florens Verschelde pour mettre en place ce qu’on appelle une taille de police (et d’interligne) responsive, qui s’adapte à la taille de votre écran.

Le principe est de définir un seuil bas et un seuil haut de largeur d’écran, de définir deux tailles de police (et d’interligne) qui s’appliquent respectivement en deçà et au dessus, puis de calculer une taille intermédiaire (et son interligne) entre ces deux seuils.

J’ai commencé mes tests avec ce code (SASS/Compass) :

$html-font-size:			100%;	// Basically 16px

$body-font-size:			1em;
$body-font-size-small:		0.875em;	// For screen smaller than $m-screen (see below)
$body-font-size-large:		1.125em;	// For screen larger or equal than $xxl-screen (see below)

$small-screen:	26.5em;
$large-screen:	120em;

html {
	font-size: $html-font-size;
}
body {
	font-size: $body-font-size;
	line-height: 1.5;
	@media screen and(max-width: $small-screen) {
		font-size: $body-font-size-small;
		line-height: 1.3;
	}
	@media screen and(min-width: $large-screen) {
		font-size: $body-font-size-large;
		line-height: 1.5;
	}
	@media screen and(min-width: $small-screen) and (max-width: $large-screen) {
		font-size: calc(
				#{$body-font-size-small} +
				#{strip-unit($body-font-size-large - $body-font-size-small)} *
				(100vw - #{strip-unit($small-screen)}rem) /
				(#{strip-unit($large-screen)} - #{strip-unit($small-screen)})
			);
		line-height: calc(
				1.3em +
				(1.5 - 1.3) *
				(100vw - #{strip-unit($small-screen)}rem) /
				(#{strip-unit($large-screen)} - #{strip-unit($small-screen)})
			);
	}
}

Ce qui, une fois compilé, donne ça :

html {
  font-size: 75%; }

body {
  font-size: 1em;
  line-height: 1.5; }
  @media screen and (max-width: 26.5em) {
    body {
      font-size: 0.875em;
      line-height: 1.3; } }
  @media screen and (min-width: 120em) {
    body {
      font-size: 1.125em;
      line-height: 1.5; } }
  @media screen and (min-width: 26.5em) and (max-width: 120em) {
    body {
      font-size: calc( 0.875em + 0.25 * (100vw - 26.5rem) / (120 - 26.5) );
      line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - 26.5rem) / (120 - 26.5) ); } }

Ce qui donne en pratique les tailles suivantes :

• Écrans de largeur inférieure ou égale à 424 pixels : police de 14 pixels et interligne 1.3
• Écrans de largeur supérieure ou égale à 1920 pixels : police de 18 pixels et interligne 1.5
• Écrans de largeur comprise entre 424 pixels et 1920 pixels : taille variable entre les valeurs ci-dessus, de 14 à 18 pixels et interligne de 1.3 à 1.5

Seulement appliquer cette méthode grossit particulièrement la taille de la police puisque sur mon écran, là où avec Dotclear 2.10 j’avais une taille de 12 pixels je me retrouve avec une police de plus de 17 pixels (17,35 pour être exact) avec Dotclear 2.11.

C’est très très gros je trouve.

Back plus dense que le Front

Du coup j’ai essayé avec une taille réduite en changeant la taille de base sur l’objet html :

$html-font-size:			75%;		// Basically 12px (16px ⁄x 0.75)

Ce qui donne compilé :

html {
  font-size: 75%; }

On obtient donc une taille de police de référence égale à 12px au lieu des 16px initiaux.

Le reste ne variant pas puisque basé sur cette valeur initiale, ce qui donne maintenant les tailles suivantes :

• Écrans de largeur inférieure ou égale à 424 pixels : police de 10,5 pixels et interligne 1.3
• Écrans de largeur supérieure ou égale à 1920 pixels : police de 13,5 pixels et interligne 1.5
• Écrans de largeur comprise entre 424 pixels et 1920 pixels : taille variable entre les valeurs ci-dessus, de 10,5 à 13,5 pixels et interligne de 1.3 à 1.5

Compte-tenu que je n’ai pour l’instant pas enlevé la règle de changement de taille de police pour les petits écrans :

@media screen and (max-width: 26.5em) {
	#wrapper { font-size: 1.4em; }
}

Les écrans de largeur inférieur ou égale à 424 pixels se retrouvent en fait avec une taille de police effective de 14.7px, puisque calculée par rapport à la taille définie sur l’objet body.

Dans ces conditions, sur mon écran, là où avec Dotclear 2.10 j’avais 12px de taille de police, je me retrouve avec une taille de police de 14px (14,15 pour être exact) avec Dotclear 2.11, et je trouve ça plus raisonnable.

Conclusion

Les « réglages » et tests ne sont pas finis, il faut encore que j’ajuste éventuellement les tailles min et max des polices — en essayant d’éviter des tailles non entières pour les valeurs de référence — et déterminer si les petits écrans (largeur < 424 pixels) doivent être traités à part ou pas. D’ailleurs les différents seuils des mediaqueries seront peut-être à ajuster aussi et ça aura du coup une conséquence sur l’agencement qui en découle…

Bref y’a encore du pain sur la planche !

D’ailleurs si vous avez des idées, questions ou commentaires, vous êtes les bienvenus.

Je viens de m’apercevoir qu’il y a une erreur de conception puisque ma taille de police devrait être comprise entre 10,5 et 13,5 et qu’elle est de 14,15 sur un écran de 1680 pixels de large !

Et la cause vient du mode de calcul en em des mediaqueries (taille d’écran) versus celui utilisé pour les éléments qui composent la page. Pour l’écran, 1 em vaut la taille définie au niveau des réglages du navigateur, y compris si on redéfinit une taille de police différente pour l’élément html, alors que pour les éléments, 1 em dépend de la taille définie pour l’élément du niveau supérieur et 1 rem dépend de la taille définie pour l’élément html.

Je viens de revoir mes formules en conséquence et ça fonctionne beaucoup mieux :

@media screen and(min-width: $small-screen) and (max-width: $large-screen) {
		font-size: calc(
				#{$body-font-size-small} +
				#{strip-unit($body-font-size-large - $body-font-size-small)} *
				(100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) /
				(#{strip-unit(relative-to-screen($large-screen,$html-font-size))} -
					#{strip-unit(relative-to-screen($small-screen,$html-font-size))})
			);
		line-height: calc(
				1.3em +
				(1.5 - 1.3) *
				(100vw - #{strip-unit(relative-to-screen($small-screen,$html-font-size))}rem) /
				(#{strip-unit(relative-to-screen($large-screen,$html-font-size))} -
					#{strip-unit(relative-to-screen($small-screen,$html-font-size))})
			);
	}

Côté configuration je suis revenu à quelque chose de plus proche de la version 2.10 :

$html-font-size:			62.5%;		// Basically 10px (16px ⁄x 0.625) — Must be in %

$body-font-size:			1.4rem;
$body-font-size-small:		1.2rem;		// For screen smaller than $small-screen (see below)
$body-font-size-large:		1.6rem;		// For screen larger or equal than $large-screen (see below)

Ce qui donne, une fois compilé :

@media screen and (min-width: 26.5em) and (max-width: 120em) {
    body {
      font-size: calc( 1.2rem + 0.4 * (100vw - 42.4rem) / (192 - 42.4) );
      line-height: calc( 1.3em + (1.5 - 1.3) * (100vw - 42.4rem) / (192 - 42.4) ); } }