Safari permet aux sites d’utiliser la police du système

Nicolas Furno |

En publiant un article sur le blog officiel du projet WebKit, Apple officialise en quelque sorte la découverte du développeur Craig Hockenberry. Avec iOS 9 et Safari 9 sous OS X 10.10 et OS X 10.11, une nouvelle option permet de choisir la police par défaut du système pour du texte. Selon les cas, il s’agit de San Francisco ou de Helvetica Neue, mais le fait de ne pas la nommer permet aussi d’adapter le texte plus précisément.

On a utilisé ici la famille de police spécifique à Apple : à gauche, Chrome n’en tient pas compte et choisit la police suivante définie en CSS (Roboto en l’occurrence) ; à droite, Safari affiche le texte avec San Francisco. Cliquer pour agrandir et mieux voir les différences

Jusque-là, les développeurs de site web devaient spécifier dans leur code le nom de la police utilisée par Apple s’ils voulaient obtenir la même présentation sur une page web. Avant OS X Yosemite, il fallait opter pour Lucida Grande, puis pour Helvetica Neue et enfin San Francisco. Autant dire que c’était contraignant, et puis cela ne fonctionnait de toute manière plus avec iOS 9 et OS X El Capitan.

Apple a choisi en effet de ne pas fournir la police San Francisco avec ses nouveaux systèmes. Elle n’est pas accessible à l’utilisateur, on ne peut pas la voir dans le Livre des Polices, ni l’utiliser dans ses documents. En conséquence, pour l’utiliser sur un site web, on ne peut pas simplement la nommer en CSS. À la place, Apple offre aux webmasters une abstraction : ils peuvent utiliser -apple-system en CSS.

Exemple de code CSS qui permet d’afficher du texte en San Francisco avec Safari et iOS 9 et OS X 10.11

C’est le système qui ajustera ensuite la police utilisée et surtout ses variantes. Car San Francisco est disponible dans un grand nombre de variantes et en fonction de l’écran, mais aussi de la graisse du texte, on aura l’une ou l’autre. Par ailleurs, si vous créez un site mobile, vous pouvez utiliser des propriétés plus précises encore qui fonctionnent avec la police dynamique d’iOS 9. Concrètement, on définit un élément de titre, une légende ou du texte normal, et le système ajustera la taille de chaque élément en fonction du paramètre choisi par l’utilisateur.

Ces propriétés CSS ont été imaginées par Apple et elles restent exclusives à Apple à ce jour. Seul Safari les prend en charge pour le moment, et il faut prévoir au moins une alternative pour tous les autres navigateurs. Cela pourrait changer toutefois à terme : Apple a proposé l’idée au W3C qui se charge des standards du web. Le constructeur n’a pas souhaité attendre le standard pour lancer la fonction, mais on peut très bien imaginer un jour que tous les navigateurs disposeront d’un accès simplifié à la police du système.

avatar dandu | 

Ca fonctionne aussi sous Yosemite avec Safari 9

avatar Nicolas Furno | 
@ dandu : ah mais oui, j'avais oublié qu'il y avait Safari 9 sur Yosemite !
avatar oomu | 

bah, tout ça pour faire des app web qui singeront les apps natives...

avatar Archos | 

Vous voulez parler de la police San Roboto ? :p

avatar Nicolas Furno | 
@ Archos : je trouve que la première capture d'écran, qui oppose Roboto et San Francisco, montre bien la différence, précisément.
avatar Archos | 

Peut etre... Tu apprecieras surement cette autre image :

https://pbs.twimg.com/media/B2v_5TACAAAHdJ1.png

Bon, sachant que Roboto est elle meme une pale copie d'helvetica,

avatar AirForceTwo | 

Cool, on va faire des sites web pour mac. Attendez, je vais ressortir mon logo "Hello Safari Users", la balise marquee, et on va créer le graphisme à partir d'une fenêtre et des icônes du finder. Reste à réactiver mon compte chez Multimania. Ah oui c'est vrai, j'ai laissé mon mot de passe sur mon adresse Caramail. Et une fois le site prêt, hop! on upload ça avec Fetch.

avatar Un Type Vrai | 

Est-ce si idiot de penser que la police du texte principal doit être choisie par le lecteur et non pas le serveur sachant que :

- Avoir la même police pour les écrans "retina" ou pas, à 72 DPI ou 160 DPI, de 27" ou 15" est pas forcément intelligent.
- Avec en plus le mobile, c'est carrément IDIOT d'espérer la même lisibilité
- On ne connait pas facilement le niveau de zoom et la largeur d'une fenêtre
- C'est CHIANT de tout prévoir pour toute les situations côté serveur, sachant que pour le système d'exploitation l'utilisateur a déjà fait des choix.

Franchement, les sites qui n'ont pas la même ergonomie et que je ne peux pas régler sont CHIANTS.
Les applications suivent toutes des GUI (Apple / Google ...), c'est nettement plus simple à utiliser. (et si on est surpris par certaines, on désinstalle et voilà)

C'est à moi utilisateur de choisir comment doit s'afficher votre contenu. Et le plus simple pour ça,c 'est de pouvoir configurer mon OS et que cette configuration soit partagée...

Bref, l'internet du contenu apportera enfin un peu de qualité (on est à l'internet marketing qui apporte de la couleur, des boutons anti ergonomiques et on a vécu l'internet de la démonstration avec marquee et flash pour afficher un menu...)

avatar cv21 | 

Bref, l'internet du contenu apportera enfin un peu de qualité (on est à l'internet marketing qui apporte de la couleur, des boutons anti ergonomiques et on a vécu l'internet de la démonstration avec marquee et flash pour afficher un menu...)

Je trouve cette remarque pertinente. Effectivement aujourd'hui le contenu est séparé de la mise en forme mais toujours côté serveur ! Pour que le lecteur puisse choisir sa mise en forme il faudrait que les contenus aient tous la même structure ce qui n'est pas évident...Il y a déjà les flux RSS "peu exploités", Apple qui sort son truc d'agrégation de news uniquement aux US si j'ai bien compris...

CONNEXION UTILISATEUR