Introduction
Le Web est une plate-forme extrêmement puissante pour le texte, un domaine dans lequel Adobe possède une grande expérience et une grande expertise. Quand Adobe a cherché des moyens de faire progresser le Web, il nous a semblé évident de commencer par améliorer encore les capacités de traitement de texte du Web. Le Web suppose généralement une orientation verticale sur une seule colonne pour le texte. Bien qu'il soit possible de faire circuler du texte autour d'images et même de le mettre en forme sur plusieurs colonnes avec CSS, il est encore très difficile d'obtenir une véritable mise en page de type magazine sur le Web. Avec les régions CSS et les exclusions CSS, Adobe est à l'avant-garde des efforts visant à apporter la puissance de la publication assistée par ordinateur aux navigateurs récents. Par exemple, dans la capture d'écran ci-dessous, les exclusions CSS sont utilisées pour faire défiler le texte le long du contour de la montagne :
Le document de la capture d'écran ci-dessous utilise également les exclusions CSS pour permettre au texte d'habiller les formes des images, ainsi que les régions CSS pour mettre en forme le texte en colonnes et autour d'une citation :
Régions CSS
Avant d'entrer dans les détails des régions CSS, j'aimerais vous expliquer comment activer les régions dans Google Chrome. Une fois que vous avez activé les régions CSS, vous pouvez essayer certains des exemples référencés dans cet article et créer les vôtres.
Activer les régions CSS dans Google Chrome
Depuis la version 20 de Chrome (version 20.0.1132.57, pour être exact), les régions CSS sont activées via l'interface chrome://flags. Pour activer les régions CSS, procédez comme suit :
- Ouvrez un nouvel onglet ou une nouvelle fenêtre dans Chrome.
- Saisissez
chrome://flagsdans la barre d'adresse. - Utilisez la fonctionnalité Rechercher sur la page (Ctrl/Cmd+F) et recherchez la section "experimental Web Platform features" (Fonctionnalités expérimentales de la plate-forme Web).
- Cliquez sur le lien Activer.
- Cliquez sur le bouton Relancer maintenant en bas de la page.
Pour en savoir plus sur les flags Chrome, consultez mon article de blog Tout savoir sur les flags Chrome.
Une fois que vous avez relancé votre navigateur, vous pouvez commencer à tester les régions CSS.
Présentation des régions CSS
Les régions CSS permettent à un bloc de texte balisé sémantiquement de s'insérer automatiquement dans des "boîtes" (actuellement des éléments). Le diagramme ci-dessous illustre la séparation du texte (le flux) et des zones (les régions dans lesquelles le texte s'écoule) :
Examinons un cas d'utilisation réel des régions CSS. En plus d'être développeur chez Adobe, je suis également auteur de science-fiction. Je publie fréquemment mon travail en ligne sous une licence Creative Commons. Pour qu'il fonctionne sur un maximum d'appareils et de navigateurs, j'utilise souvent un format extrêmement simple, semblable à celui-ci :
Grâce aux régions CSS, j'ai pu créer une expérience à la fois plus intéressante visuellement et beaucoup plus fonctionnelle, car elle est plus facile à parcourir et plus agréable à lire :
À des fins de démonstration, j'ai ajouté la possibilité de révéler les régions CSS dans ce prototype. La capture d'écran ci-dessous montre comment les régions sont disposées de manière à donner l'impression d'être des colonnes qui s'enroulent autour d'un graphique et d'une citation au centre :
Vous pouvez tester ce prototype (et afficher le code source) ici. Utilisez les touches fléchées pour naviguer, puis appuyez sur la touche Esc pour afficher les régions. Les prototypes précédents sont également disponibles sur cette page.
Créer un flux nommé
Le code CSS requis pour faire circuler un bloc de texte dans des régions est extrêmement simple. L'extrait de code ci-dessous attribue un flux nommé "article" à un élément div avec l'ID "content" et attribue ce même flux nommé "article" à tout élément avec la classe "region". Le texte contenu dans l'élément "content" s'écoulera donc automatiquement dans n'importe quel élément de la classe "region".
<!DOCTYPE html>
<html>
<head>
<style>
#content {
{ % mixin flow-into: article; % }
}
.region {
{ % mixin flow-from: article; % }
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}
</style>
</head>
<body>
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="box-c" class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
</div>
</body>
</html>
Le résultat ressemble à ceci :
Notez que le texte de la div "content" n'a aucune connaissance de sa présentation. En d'autres termes, il peut rester entièrement intact sur le plan sémantique, même s'il transite par différentes régions. De plus, comme les régions ne sont que des éléments, elles sont positionnées et dimensionnées à l'aide de CSS, comme n'importe quel autre élément. Elles sont donc parfaitement compatibles avec les principes du responsive design. Désigner des éléments comme faisant partie d'un flux nommé signifie simplement que le texte spécifié s'écoule automatiquement à travers eux.
Le modèle d'objet CSS
Le modèle d'objet CSS, ou CSSOM, définit des API JavaScript pour travailler avec CSS. Vous trouverez ci-dessous la liste des nouvelles API liées aux régions CSS :
document.webkitGetNamedFlows(): fonction qui renvoie la collection de flux nommés disponibles dans le document.document.webkitGetNamedFlows().namedItem("article"): fonction qui renvoie une référence à un flux nommé spécifique. L'argument correspond au nom spécifié comme valeur des propriétés CSSflow-intoetfrom-from. Pour obtenir une référence au flux nommé spécifié dans l'extrait de code ci-dessus, vous devez transmettre la chaîne "article".WebKitNamedFlow: représentation d'un objet d'un floe nommé avec les propriétés et fonctions suivantes :firstEmptyRegionIndex: valeur entière qui pointe vers l'index de la première région vide associée au flux nommé. ConsultezgetRegions()ci-dessous pour savoir comment obtenir la collection de régions.name: valeur de chaîne avec le nom du flux.overset: propriété booléenne qui est :falselorsque le contenu du flux nommé tient dans les régions associéestruelorsque le contenu ne tient pas et que d'autres régions sont nécessaires pour contenir l'ensemble du contenu.
getContent(): fonction qui renvoie une collection avec des références aux nœuds qui s'écoulent dans le flux nommé.getRegions(): fonction qui renvoie une collection avec des références aux régions contenant le contenu du flux nommé.getRegionsByContentNode(node): fonction qui renvoie une référence à la région contenant le nœud spécifié. Cela est particulièrement utile pour trouver des régions contenant des éléments tels que des ancres nommées.
webkitregionoversetchangeévénement. Cet événement est déclenché sur unWebkitNamedFlowchaque fois que la mise en page du contenu associé change pour une raison quelconque (ajout ou suppression de contenu, modification de la taille de la police, modification de la forme de la région, etc.) et entraîne la modification de la propriétéwebkitRegionOversetd'une région. Cet événement est utile pour écouter les modifications de mise en page approximatives. Cela indique qu'un événement important s'est produit et que la mise en page peut nécessiter une attention particulière (par exemple, si d'autres régions sont requises, si certaines régions sont vides, etc.).webkitregionfragmentchangeévénement. Non implémenté au moment de cette modification. Cet événement est déclenché sur unWebkitNamedFlowchaque fois que la mise en page du contenu associé change pour une raison quelconque, comme pourwebkitregionoversetchange, mais indépendamment de toute modification des propriétéswebkitRegionOverset. Cet événement est utile pour écouter les modifications de mise en page précises qui n'ont pas nécessairement d'impact sur l'ensemble de la mise en page du flux nommé. Par exemple, le contenu passe d'une région à une autre, mais le contenu global s'adapte toujours à toutes les régions.Element.webkitRegionOverset: les éléments deviennent des régions lorsque la propriété CSSflow-fromleur est attribuée. Ces éléments ont une propriétéwebkitRegionOversetqui, s'ils font partie d'un flux nommé, indique si le contenu d'un flux déborde ou non de la région. Les valeurs possibles de webkitRegionOverset sont les suivantes :- "overflow" si le contenu dépasse la capacité de la région
- "fit" si le contenu s'arrête avant la fin de la région
- "empty" si le contenu n'a pas atteint la région
L'une des principales utilisations du CSSOM consiste à écouter les événements webkitregionoversetchange et à ajouter ou supprimer des régions de manière dynamique afin de s'adapter à des quantités de texte variables. Par exemple, si la quantité de texte à mettre en forme est imprévisible (peut-être générée par l'utilisateur), si la fenêtre du navigateur est redimensionnée ou si la taille de la police change, il peut être nécessaire d'ajouter ou de supprimer des régions pour s'adapter au changement de flux. De plus, si vous souhaitez organiser votre contenu en pages, vous aurez besoin d'un mécanisme permettant de modifier dynamiquement le DOM ainsi que vos régions.
L'extrait de code JavaScript suivant montre comment utiliser le CSSOM pour ajouter des régions de manière dynamique, si nécessaire. Notez que, par souci de simplicité, il ne gère pas la suppression des régions ni la définition de leur taille et de leur position. Il est fourni à titre de démonstration uniquement.
var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
function onLayoutUpdate(event) {
var flow = event.target;
// The content does not fit
if (flow.overset === true) {
addRegion();
} else {
regionLayoutComplete();
}
}
function addRegion() {
var region = document.createElement("div");
region.style = "flow-from: article";
document.body.appendChild(region);
}
function regionLayoutComplete() {
// Finish up your layout.
}
D'autres démonstrations sont disponibles sur la page d'exemples de régions CSS.
Modèles de page CSS
L'utilisation du CSSOM est probablement le moyen le plus puissant et le plus flexible d'implémenter des éléments tels que la pagination et la mise en page responsive. Toutefois, Adobe travaille avec des outils de texte et de publication assistée par ordinateur depuis assez longtemps pour savoir que les concepteurs et les développeurs souhaitent également un moyen plus simple d'obtenir des fonctionnalités de pagination relativement génériques. C'est pourquoi nous travaillons sur une proposition appelée "Modèles de page CSS", qui permet de définir le comportement de pagination de manière entièrement déclarative.
Examinons un cas d'utilisation courant des modèles de page CSS. L'extrait de code ci-dessous montre l'utilisation de CSS pour créer deux flux nommés : "article-flow" et "timeline-flow". Il définit également un troisième sélecteur appelé "combined-articles", dans lequel les deux flux seront contenus. La simple inclusion de la propriété overflow-style dans le sélecteur "combined-articles" indique que le contenu doit être automatiquement paginé le long de l'axe X, ou horizontalement :
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Maintenant que les flux ont été définis et que le comportement de dépassement souhaité a été spécifié, nous pouvons créer le modèle de page lui-même :
@template {
@slot left {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
@slot time {
width: 25%;
float: left;
{ % mixin flow-from: timeline-flow; % }
}
@slot right {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
}
Les modèles de page sont définis à l'aide de la nouvelle syntaxe "at". Dans l'extrait de code ci-dessus, nous définissons trois emplacements, chacun correspondant à une colonne. Le texte du flux "article-flow" s'écoulera dans les colonnes de gauche et de droite, et le texte du flux "timeline-flow" remplira la colonne du milieu. Le résultat peut ressembler à ceci :
Notez que le texte de l'article (dans les colonnes de gauche et de droite) est en anglais, et que la chronologie au centre est en allemand. De plus, le document défile horizontalement sans nécessiter de code JavaScript. Tout a été fait de manière entièrement déclarative en CSS.
Les modèles de page CSS ne sont encore qu'une proposition, mais nous disposons d'un prototype qui utilise un "shim" JavaScript (également appelé polyfill) pour vous permettre de les tester dès maintenant.
Pour en savoir plus sur les régions CSS en général, consultez la page sur les régions CSS sur html.adobe.com.
Exclusions CSS
Pour obtenir une mise en page digne d'un magazine, il ne suffit pas de pouvoir faire défiler le texte dans des régions. Pour créer des publications de haute qualité et visuellement intéressantes, il est essentiel de pouvoir faire circuler le texte autour ou à l'intérieur de graphiques et de formes irrégulières. Les exclusions CSS apportent ce niveau de qualité de production au Web.
La capture d'écran ci-dessous provient d'un prototype d'exclusions CSS et montre le texte s'écoulant de manière dynamique autour d'un tracé qui correspond au contour d'une grande formation rocheuse :
L'inverse est illustré dans la capture d'écran suivante : du texte s'écoulant à l'intérieur de polygones de forme irrégulière :
La première étape pour pouvoir faire circuler du texte autour ou à l'intérieur de formes arbitraires consiste à développer et à optimiser les algorithmes requis. Adobe travaille actuellement sur des implémentations qui seront directement intégrées à WebKit. Une fois ces algorithmes optimisés, ils serviront de base pour le reste des exclusions CSS.
Pour en savoir plus sur les exclusions CSS, consultez la page sur les exclusions CSS sur html.adobe.com. Pour en savoir plus sur le travail d'Adobe sur la technologie sous-jacente des exclusions CSS, consultez l'article de blog de Hans Muller intitulé Horizontal Box: Polygon Intersection for CSS Exclusions.
État des régions CSS et des exclusions CSS (2012)
La première fois que j'ai parlé publiquement des régions CSS et des exclusions CSS, c'était lors de l'Adobe Developer Pod à la conférence Google I/O 2011. À l'époque, je présentais des démonstrations dans notre propre navigateur prototype personnalisé. L'accueil a été extrêmement enthousiaste, mais la déception était palpable lorsque les spectateurs ont découvert qu'aucune des fonctionnalités que je présentais n'était encore disponible dans les principaux navigateurs.
J'ai de nouveau assisté à la conférence Google I/O cette année (2012), cette fois en tant que présentateur, aux côtés de mon collègue Vincent Hardy et d'Alex Danilo de Google (vous pouvez regarder la présentation ici). Un an plus tard, environ 80 % de la spécification des régions CSS ont été implémentés dans WebKit et sont déjà disponibles dans la version la plus récente de Google Chrome (notez que les régions CSS doivent actuellement être activées via chrome://flags). La compatibilité préliminaire avec les régions CSS est même disponible dans Chrome pour Android :
De plus, les régions CSS et les exclusions CSS sont toutes deux implémentées dans la version preview d'Internet Explorer 10 et figurent actuellement dans la feuille de route 2012 de Mozilla pour Firefox. La prochaine version majeure de Safari devrait prendre en charge la majeure partie de la spécification CSS Regions, et les mises à jour ultérieures devraient inclure le reste.
Vous trouverez ci-dessous un calendrier détaillé des progrès que nous avons réalisés avec les régions CSS et les exclusions CSS depuis notre proposition initiale au W3C en avril 2011 :
Conclusion
Adobe possède une vaste expérience dans le domaine du texte, des polices et de la publication assistée par ordinateur en général, grâce à des outils comme InDesign. Bien que le Web soit déjà une plate-forme très puissante pour le texte, nous voulons utiliser nos connaissances et notre expérience pour aller encore plus loin dans la présentation du texte. Les régions CSS et les exclusions CSS permettent de conserver une structure sémantique du contenu tout en offrant une mise en page digne d'un magazine, et donc un Web beaucoup plus expressif.