Pour faire couler un article dans des zones de style magazine sur un Mac, utilisez les colonnes CSS pour une mise en page dans un navigateur ou des zones de texte liées dans Pages pour des zones positionnées librement. CSS Regions décrivait le flux automatique entre des zones distinctes dans le navigateur, mais les navigateurs de bureau actuels ne le prennent pas en charge. Compatibilité de CSS Regions

Ce guide vous aide à choisir et à créer une mise en page pour un article continu : le texte commence dans la zone A, se poursuit dans la zone B et se termine dans la zone C. L’exemple pour navigateur utilise du texte synthétique dans un document local que vous contrôlez ; il ne modifie aucun site Web public existant.

Un navigateur peut-il automatiquement répartir le texte entre des zones distinctes ?

Le projet de spécification CSS Regions du W3C décrit précisément cette disposition. Une source fournit du contenu à un flux nommé avec flow-into, et les zones de destination le reçoivent avec flow-from. Les destinations forment une chaîne dans l’ordre du document, ce qui permet au contenu de passer d’une zone à l’autre, même si leurs positions et dimensions diffèrent. Toutefois, le document publié reste une ébauche de travail datée du 9 octobre 2014. La description d’une fonctionnalité dans une spécification ne signifie pas qu’elle est disponible dans les navigateurs. CSS Regions Module Level 1

Les informations actuelles sur la compatibilité indiquent que CSS Regions n’est pas pris en charge dans Safari, Chrome, Firefox et Edge. WebKit consigne également son retrait dans un ticket d’implémentation terminé. Ajouter les anciennes déclarations à une page moderne ne permet donc pas de répartir le texte d’un article de façon fiable. Compatibilité de CSS Regions, Supprimer la prise en charge des régions CSS

Commencez par décider quelle partie de la mise en page souhaitée est essentielle. Trois colonnes de même largeur, trois zones positionnées indépendamment et trois pages imprimées nécessitent des outils différents.

Résultat souhaité Solution pratique Limite
Article continu dans des colonnes régulières du navigateur Mise en page CSS native à plusieurs colonnes Les colonnes appartiennent à un même conteneur
Pages générées par le navigateur pour l’impression ou le PDF Paged.js La pagination nécessite son script et une configuration du document
Texte s’écoulant dans des zones positionnées librement sur un Mac Zones de texte liées dans Pages Le résultat est un document Pages
Flux automatique dans des zones arbitraires du navigateur Implémentation de mise en page personnalisée La fonctionnalité CSS Regions abandonnée ne peut pas assurer cela

Ces choix s’appuient sur les modèles documentés : MDN décrit les colonnes générées, Paged.js décrit la fragmentation en pages et Apple documente les fils de zones de texte liées. Considérez ce tableau comme une aide à la décision fondée sur ces fonctionnalités. Mise en page à plusieurs colonnes, Fonctionnement de Paged.js, Lier des zones de texte dans Pages sur Mac

Créer un article continu dans le navigateur avec les colonnes CSS

Choisissez cette solution lorsque des colonnes régulières conviennent à la conception. Gardez le texte de l’article dans un seul conteneur et laissez le navigateur déterminer où chaque colonne se termine. MDN indique que la mise en page à plusieurs colonnes crée un flux continu, mais que les colonnes ne peuvent pas avoir chacune une largeur différente ni une couleur d’arrière-plan individuelle. Mise en page à plusieurs colonnes

Sur votre Mac, ouvrez TextEdit et choisissez Fichier > Nouveau, puis Format > Convertir au format texte. Collez le document complet ci-dessous, enregistrez-le sous le nom article-columns.html, puis choisissez Utiliser .html si vous y êtes invité. Apple documente ces étapes pour créer un fichier HTML dans TextEdit. Travailler avec des documents HTML dans TextEdit sur Mac

Voici un document HTML complet qui comprend tous les styles et le contenu d’exemple. Il ne nécessite aucune bibliothèque, ressource réseau ni JavaScript. Ouvrez le fichier enregistré dans votre navigateur pour examiner la mise en page ; le rendu n’a pas été testé ici.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

La notation abrégée columns demande une largeur préférée de 260 pixels CSS et un maximum de trois colonnes. Le navigateur détermine combien peuvent tenir. À la largeur totale de contenu de 960 pixels de l’exemple, trois colonnes séparées par deux espaces de 24 pixels auraient chacune une largeur indicative de (960 − 2 × 24) ÷ 3 = 304 pixels CSS. Ce calcul a été vérifié ; il ne s’agit pas d’une mesure effectuée dans un navigateur. Mise en page à plusieurs colonnes

Le titre reste au-dessus de l’article, car il se trouve en dehors du conteneur à colonnes. Les six paragraphes restent dans leur ordre d’origine à l’intérieur de celui-ci. Redimensionnez la fenêtre du navigateur pour examiner la mise en page plus étroite, puis repérez le marqueur final END-A pour vérifier que vous pouvez atteindre la fin de l’article.

Régler le remplissage des colonnes sans masquer la suite

Dans l’exemple, la hauteur de l’article est automatique et la propriété column-fill: balance est utilisée. L’équilibrage tente de répartir le contenu entre les colonnes. Si votre conception doit plutôt remplir une colonne jusqu’à une hauteur précise avant de continuer, le réglage approprié est column-fill: auto. MDN décrit des différences d’interopérabilité et précise que Chrome ne consulte auto que si le conteneur a une dimension de bloc, par exemple une hauteur dans cette mise en page horizontale. column-fill

Une hauteur fixe introduit un risque important : le texte excédentaire peut créer des colonnes supplémentaires horizontalement, au-delà du conteneur. Définir une hauteur ne limite pas l’article aux colonnes visibles. MDN documente explicitement ce comportement de débordement. Évitez de masquer le reste avec overflow: hidden. Gérer le débordement dans une mise en page à plusieurs colonnes

Pour une mise en page destinée à la lecture, gardez la hauteur automatique utilisée ci-dessus, sauf si la continuation horizontale est voulue. Si vous testez des colonnes de hauteur fixe, examinez toute l’étendue horizontale et vérifiez de nouveau le marqueur final après chaque changement de taille de police ou de largeur. Un premier écran d’apparence soignée ne prouve pas que l’article entier tient dans la mise en page.

Considérez les sauts de paragraphe comme une structure du contenu, et non comme des fins de colonne prédéterminées. Pour de courts éléments regroupés, break-inside: avoid peut éviter la fragmentation, comme le montre MDN avec des cartes. Appliquer cette règle à chaque long paragraphe peut rendre la disposition moins souple ; introduisez-la donc uniquement lorsqu’il est utile à la lecture de garder un élément particulier d’un seul tenant. Mise en page à plusieurs colonnes

Que faire si les zones doivent avoir des formes ou des positions différentes ?

Imaginez une mise en page où une large zone A surplombe une zone B plus étroite, tandis qu’une zone C distincte se trouve en bas à droite. Les colonnes CSS ne peuvent pas reproduire cette chaîne arbitraire en plaçant simplement trois conteneurs sur la page. Leur flux automatique appartient à un conteneur à plusieurs colonnes ; l’ébauche CSS Regions proposait un mécanisme distinct pour relier les zones de destination. Mise en page à plusieurs colonnes, CSS Regions Module Level 1

Pour une composition sur Mac où des zones librement positionnées sont essentielles, Pages propose un mécanisme documenté de chaînage du texte. Commencez par disposer trois zones de texte en A, B et C, puis placez l’article complet dans la première zone. Apple permet de créer un fil à partir d’une zone vide ou d’une zone contenant déjà du texte. Lier des zones de texte dans Pages sur Mac

  1. Sélectionnez la zone A et cliquez sur son cercle blanc en haut pour commencer le fil.
  2. Sélectionnez chaque zone de destination vide et cliquez sur son cercle blanc pour l’ajouter au fil. Vérifiez la couleur commune des cercles et les numéros de séquence.
  3. Pour corriger l’ordre, cliquez sur le cercle d’une zone et choisissez son numéro sous Ordre de disposition.
  4. Si la dernière zone affiche un indicateur de texte tronqué, agrandissez une zone ou ajoutez-en une autre liée. Les zones verrouillées ou regroupées ne peuvent pas être liées. Lier des zones de texte dans Pages sur Mac

Déplacer une zone ailleurs sur la même page ne modifie pas automatiquement l’ordre de lecture du fil. Utilisez délibérément Ordre de disposition. Pages constitue ainsi une solution pratique pour obtenir la composition visuelle souhaitée, tout en gardant à l’esprit que ses fils de zones de texte n’ajoutent aucune fonctionnalité au navigateur. Lier des zones de texte dans Pages sur Mac

Quand utiliser Paged.js ou un polyfill de Regions ?

Choisissez Paged.js lorsque le résultat souhaité est une succession de pages. Sa documentation officielle décrit un module de découpage qui place le contenu sur une page, détecte les débordements et continue sur les pages nouvellement créées. Ce modèle de pagination dans le navigateur est utile, mais la documentation ne permet pas de conclure qu’il prend en charge le chaînage arbitraire dans des zones d’écran positionnées indépendamment. Fonctionnement de Paged.js

La configuration documentée pour le navigateur nécessite votre HTML et votre CSS, le script Paged.js, un serveur Web et un navigateur. Les prérequis diffèrent donc de ceux de l’exemple autonome avec fichier local ci-dessus. Suivez le guide de configuration de la bibliothèque et examinez les pages générées avant l’exportation. Premiers pas avec Paged.js

Pour créer un PDF, ce guide recommande d’ouvrir la boîte de dialogue d’impression du navigateur après la pagination, de choisir la sortie PDF, de supprimer les marges d’impression ainsi que les en-têtes et pieds de page du navigateur, puis d’activer les graphiques d’arrière-plan. Les libellés des commandes d’impression peuvent varier selon le navigateur. Premiers pas avec Paged.js

L’ancien projet Adobe CSSRegions.js simule plus directement le chaînage entre les zones, mais sa propre documentation le qualifie d’expérimental et déconseille explicitement de l’utiliser en production comme substitut à la prise en charge native. Ses exemples permettent de comprendre la proposition historique, mais ne prouvent pas les capacités actuelles des navigateurs. Polyfill JavaScript CSS Regions

Préserver le façonnage du texte par le navigateur lors de l’adaptation de la mise en page

Dans la mesure du possible, gardez les paragraphes entiers sous forme de texte géré par le navigateur. Évitez d’estimer la capacité d’une zone en lui attribuant un nombre fixe de caractères. La spécification de texte du W3C décrit le façonnage au-delà des limites des éléments en ligne ainsi que les conditions qui l’interrompent, notamment les changements liés à l’espacement, à l’alignement ou à l’isolation. Diviser le texte en fragments et leur appliquer des styles séparément peut donc modifier davantage que leur position. CSS Text Module Level 3

La mesure du texte sur Canvas ne suffit pas non plus à mettre en page un article. WHATWG précise que measureText() renvoie des métriques pour le texte fourni, tandis que fillText() peint du texte à des coordonnées données. Son algorithme de préparation du texte utilise une boîte de ligne de largeur infinie ; une largeur maximale fournie peut entraîner l’ajustement du texte à cette largeur. Ces opérations ne font pas automatiquement continuer un paragraphe dans plusieurs zones DOM. Standard HTML : Canvas

Pour cette tâche, les colonnes natives laissent au navigateur le soin de gérer les sauts de ligne et le rendu du texte. Si des zones arbitraires dans le navigateur restent indispensables, une implémentation personnalisée doit tenir compte des changements de texte, des métriques de police, des dimensions disponibles et du contenu non placé. Considérez cela comme un projet de mise en page à part entière plutôt que comme un court script qui découpe le texte en fonction du nombre de caractères.

Avant d’arrêter votre choix, examinez la mise en page dans une fenêtre large, une fenêtre étroite et avec un texte agrandi dans le navigateur. Suivez l’article depuis son premier paragraphe jusqu’à END-A, vérifiez l’ordre de continuation et repérez tout contenu tronqué ou décalé horizontalement. Utilisez les colonnes du navigateur si un flux régulier répond au besoin, Paged.js si le résultat attendu est une suite de pages et les fils de Pages si le positionnement des zones individuelles détermine la composition.

Sources