Open Time

Depuis mes dernières interrogations sur la façon de gérer les polices de caractères dans Dotclear 2.11 à venir, j’ai fini par tomber d’accord avec moi-même sur le code Sass/Compass suivant :

// Remove any unit from a value
@function strip-unit(
    $value)
{
    @return $value / ($value * 0 + 1);
}

// Compute absolute value (in em or rem) depending on font-size of the html element (given in %)
@function relative-to-screen(
    $value,             // em or rem value
    $html-font-size)    // in %
{
    @return $value / (strip-unit($html-font-size) / 100);
}

// Fonts

$sans-serif:		-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

$sans-serif-input:	inherit;	// Use OS default font for input fields

$monospace:			"Andale Mono",AndaleMono,Consolas,Monaco,"Courier New",monospace;

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

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

// Screen sizes

$small-screen:	26.5em;		// 424 px
$large-screen:	120em;		// 1920 px

// Typography

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(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))})
			);
	}
	font-family: $sans-serif;
}

Ce qui donne, une fois compilé, le code CSS suivant :

html {
  font-size: 62.5%; }

body {
  font-size: 1.4rem;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #323232;
  background: #fff; }
  @media screen and (max-width: 26.5em) {
    body {
      font-size: 1.2rem;
      line-height: 1.3; } }
  @media screen and (min-width: 120em) {
    body {
      font-size: 1.6rem;
      line-height: 1.5; } }
  @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) ); } }

Vous remarquerez plusieurs choses :

1. Je suis revenu à la même directive pour le font-size de html qu’avec la CSS de Dotclear 2.10 et précédent
2. Le font-size de body passe (en moyenne) de 1.2rem à 1.4rem, plus en accord avec les standards d’accessibilité actuelle ; en fait on est plus proche maintenant du respect de la taille de police de base réglée par l’utilisateur dans son navigateur^[1].
3. Les formules de calcul ont été corrigées puisque l’unité em ne représente pas toujours la même valeur selon l’endroit où elle est employée (cf l’article en anglais de Florens Verschelde dont je reproduis ci-dessous le passage qui nous intéresse (les emphases sont de moi) :

WHAT EM MAPS TO

Quick reminder so that we’re on the same page regarding the em unit. It has many meanings, and frankly that’s a design flaw in CSS, because it makes that unit a bit magic and hard to learn, but here we are and em can mean:

1. With all CSS properties that accept em values except one, 1em means “calculated font-size of the element”. That meaning is alright.

2. In a font-size declaration, 1em means “calculated font-size of the parent element”. This special-case meaning should have been avoided (IMO, and hindsight’s 20/20 etc.) — especially since percent values for font-size do the exact same thing.

3. In a media query, 1em means “default font-size as set up by the browser and the user”. The most common value is 16px but it definitely can be different (smaller or bigger). This is not so bad but still adds to the confusion.

[ source : Florens Verschelde : « Alternatives to CSS’s em unit » ]

J’ai donc, depuis quelques jours, cette CSS appliquée à mon admin perso^[2], celle utilisée pour publier sur ce blog, et ça fonctionne plutôt pas mal.

Alors évidemment, puisque nous sommes passés à une taille de police qui dépend aussi de la taille de l’écran dans lequel elle est utilisée, cette variation s’observe quand on fait appel à des fenêtres popup, telle que celle d’insertion de média :

Sur cette popup la taille calculée de la police est presque de 13 pixels, alors que celle de l’écran principal, en dessous, est d’un peu plus de 15 pixels.

Eh bien je trouve que ça fonctionne plutôt pas mal !