CSS : utilisation de toutes les fonctionnalités de polices

Avec une prise en charge sur tous les navigateurs de la règle CSS3 @font-face et du format des polices WOFF, la typographie Web moderne s'est développée bien au-delà du royaume des « polices du Web ». Les magazines connus, tels que le New Yorker, utilisent les polices Web pour préserver la personnalité typographique de leurs gros titres, tandis que la campagne de réélection du Président des États-Unis Obama utilise le service de polices Web Typekit pour héberger leur police identitaire.

Une seule limitation demeure et empêche les concepteurs Web d'utiliser toutes les fonctionnalités de polices : l'impossibilité d'accéder à la grande variété de fonctionnalités OpenType® facultatives intégrées dans de nombreuses polices. Ces fonctionnalités définissent les options de positionnement et de remplacement des glyphes pour prendre en charge les fonctionnalités typographiques fondamentales, telles que le crénage, l'exposant et l'indice, les formes contextuelles des lettres telles que les ligatures, les styles des chiffres, l'accès à des glyphes de remplacement d'Asie de l'Est ainsi qu'à des lettres ornées italiques.

Par exemple, un « jeu stylistique » OpenType intégré dans Gabriola permet à ce texte :

…d'apparaître ainsi :

Les récentes mises à jour appliquées au module des polices CSS3 incluent un nouveau jeu de propriétés pour afficher ces fonctionnalités OpenType dans CSS. Ces propriétés peuvent être regroupées en deux vastes catégories :

• Une correspondance explicite des fonctionnalités OpenType communes avec des propriétés et valeurs spécifiques. Par exemple, font-kerning:normal applique les ajustements de paires de crénage encodés au sein de la police et font-variant-numeric: tabular-nums autorise les chiffres tabulaires.
• La propriété font-feature-settings permet un accès de bas niveau à toutes les fonctionnalités OpenType prises en charge par une police. Elle est conçue comme une « issue de secours » pour accéder à davantage de fonctionnalités avancées dans les cas les moins fréquents.

Propriété CSS : font-feature-settings

Le quatrième aperçu d'IE10 prend en charge la propriété font-feature-settings. Notre exemple Gabriola énoncé précédemment pourrait ainsi s'écrire de cette façon :

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

La déclaration -ms-font-feature-settings ci-dessus active un jeu stylistique pris en charge par la police (ss06). La propriété prend la valeur « normal » (aucun changement dans la sélection des glyphes ou le positionnement) ou une liste de valeurs séparées par des virgules d'une ou plusieurs fonctionnalités. Chaque fonctionnalité combine une valeur et une balise OpenType de quatre lettres. Dans l'exemple ci-dessus, « ss06 » est la balise de fonctionnalité OpenType pour le jeu stylistique 6. Nous attribuons la valeur 1 à la fonctionnalité pour l'activer.

Le registre des fonctionnalités OpenType définit la liste des balises possibles (également documentées ici et normalisées par ISO). Voici quelques unes des balises les plus utilisées :

Balise OpenType	Permet
kern	Crénage
liga	Ligatures standard
dlig	Ligatures conditionnelles
smcp	Petites majuscules
subs	Indice
sups	Exposant
swsh	Lettres ornées italiques
ss01, ss02, …, ss20	Jeux stylistiques de 1 à 20

Pour une bonne introduction illustrée de ces fonctionnalités et de bien d'autres, nous recommandons la section « Layout Features » (Fonctionnalités de présentation) du guide de l'utilisateur FontFont OpenType User Guide.

Les fonctionnalités les plus répandues sont les commutateurs « activé/désactivé ». La fonctionnalité dont la valeur est « désactivé » ou zéro est désactivée ; si la valeur est « activé » ou n'importe quel entier positif, la fonctionnalité est activée. Pour certaines fonctionnalités, un entier permet d'accéder à plusieurs options. Cela est généralement le cas pour les lettres ornées italiques (« swsh »). Si aucune valeur n'est indiquée pour la fonctionnalité, la valeur 1 est supposée. Toutes les déclarations suivantes sont par conséquent équivalentes pour notre exemple Gabriola :

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

Découvrir les fonctionnalités prises en charge pour une police

Les outils de conception, tels qu'Adobe InDesign ou Illustrator affichent les fonctionnalités OpenType par le biais de boîtes de dialogue et de menus conviviaux, les traitements de texte, tels que Word les prennent en charge par le biais de leur boîte de dialogue de sélection des polices et les fournisseurs de polices indiquent souvent les fonctionnalités que leurs produits prennent en charge. Un billet à venir abordera l'utilisation du navigateur pour détecter les fonctionnalités de polices. Avec un accès plus large des navigateurs aux fonctionnalités OpenType, nous espérons que les services d'hébergement des polices feront également un plus grand effort pour annoncer et documenter leur utilisation.

Prise en charge des navigateurs

La propriété font-feature-settings est actuellement prise en charge par Firefox 4+ et Internet Explorer 10 (quatrième aperçu). Notez que comme Firefox et IE n'ont pas implémenté la même version préliminaire, la syntaxe des valeurs qu'ils acceptent est différente. Par exemple, l'activation du crénage dans les deux navigateurs requiert ce qui suit :

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

Pour plus d'informations sur –moz-font-feature-settings, consultez -moz-font-feature-settings.

Tandis que les polices CSS3 évoluent sur la voie de la normalisation, nous espérons que davantage de navigateurs prendront en charge font-feature-setttings, ainsi que les propriétés et les valeurs font-variant définies dans le module, plus conviviales pour les créateurs.

Notez également que la propriété s'applique à toutes les familles de polices, qu'il s'agisse de polices Web téléchargées via les règles @font-face ou de polices locales référencées par nom.

Démonstrations

Notre site de test d'IE inclut des démonstrations sur les fonctionnalités OpenType avancées provenant de Monotype Imaging, FontFont et The Font Bureau. Elles montrent la variété des conceptions typographiques disponibles dans les polices modernes.

Vous n'avez pas besoin de polices spéciales pour essayer. Windows 7 inclut un certain nombre de polices OpenType, notamment Calibri, Cambria, Consolas, Gabriola et Palatino Linotype. Dans Windows 8 Developer Preview, nous avons ajouté les fonctionnalités OpenType aux polices Segoe UI et aux polices Web Arial, Verdana, Georgia, Times New Roman, Comic Sans et Trebuchet.

Nous sommes heureux de permettre aux créateurs Web d'accéder à toutes les fonctionnalités OpenType intégrées dans les polices Web et avons hâte qu'un plus grand nombre de conceptions typographiques soient disponibles sur le Web.

—Sylvain Galineau, Chef de projet, Internet Explorer