Para distribuir um artigo por áreas ao estilo de revista num Mac, use colunas CSS para um layout de navegador ou caixas de texto vinculadas no Pages para regiões posicionadas livremente. CSS Regions descrevia a distribuição automática entre caixas separadas do navegador, mas os navegadores de desktop atuais não oferecem suporte a esse recurso. Compatibilidade com CSS Regions

Este guia ajuda você a escolher e criar um layout para um artigo contínuo: o texto começa na área A, continua em B e termina em C. O exemplo do navegador usa texto fictício em um documento local que você controla; ele não altera um site público existente.

Um navegador consegue encadear automaticamente regiões de texto separadas?

O rascunho CSS Regions do W3C descreve exatamente essa disposição. Uma origem contribui com conteúdo para um fluxo nomeado usando flow-into, e as caixas de destino o recebem usando flow-from. Os destinos formam uma cadeia na ordem do documento, permitindo que o conteúdo continue entre caixas com posições e dimensões diferentes. No entanto, o documento publicado continua sendo um Working Draft datado de 9 de outubro de 2014. Uma especificação que descreve um recurso não comprova sua disponibilidade nos navegadores. CSS Regions Module Level 1

As informações atuais de compatibilidade indicam que CSS Regions não é compatível com Safari, Chrome, Firefox e Edge. O WebKit também registra sua remoção em uma issue de implementação concluída. Portanto, adicionar as declarações antigas a uma página moderna não oferece um encadeamento confiável de artigos. Compatibilidade com CSS Regions, Remover suporte a CSS regions

Comece decidindo qual parte do layout pretendido é essencial. Três colunas iguais, três caixas posicionadas independentemente e três páginas impressas exigem ferramentas diferentes.

Resultado necessário Opção prática Limite
Artigo contínuo em colunas regulares no navegador Layout nativo de múltiplas colunas do CSS As colunas pertencem a um único contêiner
Páginas geradas pelo navegador para impressão ou PDF Paged.js A paginação exige o script e a configuração do documento
Texto distribuído por caixas posicionadas livremente num Mac Caixas de texto vinculadas no Pages O resultado é um documento do Pages
Distribuição automática por caixas arbitrárias no navegador Uma implementação de layout personalizada O recurso descontinuado CSS Regions não pode fazer isso

Essas opções seguem os modelos documentados: o MDN descreve colunas geradas, o Paged.js descreve a fragmentação em páginas e a Apple documenta encadeamentos de caixas de texto vinculadas. Considere a tabela um guia de decisão baseado nesses recursos. Layout de múltiplas colunas, Como o Paged.js funciona, Vincular caixas de texto no Pages no Mac

Crie um artigo contínuo no navegador com colunas CSS

Use esta opção quando colunas regulares atenderem ao design. Mantenha o texto do artigo junto em um único contêiner e deixe o navegador determinar onde termina cada coluna. O MDN documenta que o layout de múltiplas colunas cria um fluxo contínuo, mas não permite definir larguras independentes diferentes nem cores de fundo individuais para as colunas. Layout de múltiplas colunas

No Mac, abra o TextEdit e escolha File > New e, em seguida, Format > Make Plain Text. Cole o documento completo abaixo, salve-o como article-columns.html e escolha Use .html se solicitado. Estas são as etapas documentadas pela Apple para criar um arquivo HTML no TextEdit. Trabalhar com documentos HTML no TextEdit no Mac

A seguir está um documento HTML completo, com todos os estilos e o conteúdo de exemplo incluídos. Ele não precisa de biblioteca, recurso de rede ou JavaScript. Abra o arquivo salvo no navegador para conferir o layout; a renderização não foi testada aqui.

<!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>

A abreviação columns solicita uma largura preferencial de 260 pixels CSS e no máximo três colunas. O navegador determina quantas cabem. Na largura total de conteúdo de 960 pixels do exemplo, três colunas separadas por dois espaços de 24 pixels teriam, por cálculo ilustrativo, (960 − 2 × 24) ÷ 3 = 304 pixels CSS cada. Esse cálculo foi verificado; não é uma medição do navegador. Layout de múltiplas colunas

O título permanece acima do artigo porque fica fora do contêiner de colunas. Os seis parágrafos permanecem na sequência original dentro dele. Redimensione a janela do navegador para examinar o layout mais estreito e, em seguida, localize o marcador final END-A para confirmar que você consegue chegar ao fim do artigo.

Controle o preenchimento das colunas sem ocultar o restante

O exemplo mantém a altura automática do artigo e usa column-fill: balance. O balanceamento tenta distribuir o conteúdo pelas colunas. Se o design exigir que uma coluna seja preenchida até uma altura especificada antes de continuar, a configuração relevante é column-fill: auto. O MDN documenta diferenças de interoperabilidade e observa que o Chrome consulta auto somente quando o contêiner tem uma dimensão definida no eixo do bloco, como uma altura neste layout horizontal. column-fill

Uma altura fixa introduz uma condição de falha importante: o texto excedente pode criar colunas horizontais adicionais além do contêiner. Definir uma altura não limita o artigo às colunas visíveis. O MDN documenta explicitamente esse comportamento de transbordamento. Evite ocultar o restante com overflow: hidden. Como lidar com o transbordamento no layout de múltiplas colunas

Para um layout de leitura, mantenha a altura automática usada acima, a menos que a continuação horizontal seja intencional. Se experimentar colunas de altura fixa, inspecione toda a extensão horizontal e confira novamente o marcador final após cada alteração no tamanho da fonte ou na largura. Uma primeira tela visualmente organizada não é evidência suficiente de que o artigo inteiro cabe.

Trate as quebras de parágrafo como estrutura do conteúdo, não como finais de coluna predeterminados. Itens curtos agrupados podem usar break-inside: avoid para desencorajar a fragmentação, como o MDN demonstra com cartões. Aplicar essa regra a todos os parágrafos longos pode tornar a disposição menos flexível; portanto, use-a somente quando manter uma unidade específica junta facilitar a leitura. Layout de múltiplas colunas

E se as regiões precisarem ter formas ou posições diferentes?

Considere um layout abstrato com uma região A larga acima de uma região B estreita e uma região C separada no canto inferior direito. As colunas CSS não conseguem reproduzir essa cadeia arbitrária apenas colocando três contêineres na página. O fluxo automático pertence a um contêiner de múltiplas colunas; o rascunho CSS Regions era o mecanismo separado destinado a conectar caixas de destino. Layout de múltiplas colunas, CSS Regions Module Level 1

Para uma composição de desktop no Mac em que caixas posicionadas livremente sejam essenciais, o Pages oferece encadeamento de texto documentado. Comece com três caixas de texto dispostas como A, B e C e coloque o artigo completo na primeira caixa. A Apple permite iniciar um encadeamento com uma caixa vazia ou com uma que já contenha texto. Vincular caixas de texto no Pages no Mac

  1. Selecione a caixa A e clique no círculo branco na parte superior para iniciar o encadeamento.
  2. Selecione cada caixa de destino vazia e clique no círculo branco para adicioná-la ao encadeamento. Confira a cor compartilhada dos círculos e os números de sequência.
  3. Para corrigir a sequência, clique no círculo de uma caixa e escolha o número correspondente em Layout Order.
  4. Se a caixa final mostrar um indicador de texto cortado, aumente uma caixa ou adicione outra caixa vinculada. Não é possível vincular caixas bloqueadas ou agrupadas. Vincular caixas de texto no Pages no Mac

Mover uma caixa para outro local na mesma página não altera automaticamente a ordem de leitura do encadeamento. Use Layout Order deliberadamente. Isso torna o Pages uma opção prática para a composição visual, deixando claro que seus encadeamentos de caixas de texto não adicionam um recurso ao navegador. Vincular caixas de texto no Pages no Mac

Quando usar Paged.js ou um polyfill de Regions?

Escolha o Paged.js quando o resultado pretendido for uma sequência de páginas. A documentação oficial descreve um segmentador que coloca conteúdo numa página, detecta o transbordamento e continua em páginas recém-criadas. Esse é um modelo útil de paginação no navegador, mas a documentação não comprova o encadeamento arbitrário por regiões de tela posicionadas independentemente. Como o Paged.js funciona

A configuração documentada para o navegador exige seu HTML e CSS, o script do Paged.js, um servidor web e um navegador. Isso altera os pré-requisitos em relação ao exemplo independente de arquivo local acima. Siga o guia de configuração da biblioteca e confira as páginas geradas antes de exportar. Primeiros passos com Paged.js

Para gerar um PDF, esse guia recomenda abrir a caixa de diálogo de impressão do navegador depois da paginação, selecionar a saída em PDF, remover as margens de impressão e os cabeçalhos e rodapés do navegador e ativar os gráficos de fundo. Os termos dos controles de impressão podem variar entre navegadores. Primeiros passos com Paged.js

O antigo projeto CSSRegions.js da Adobe simula o encadeamento de regiões de forma mais direta, mas sua própria documentação o chama de experimental e desaconselha explicitamente seu uso em produção como substituto do suporte nativo. Seus exemplos são úteis para entender a proposta histórica, mas não comprovam os recursos atuais dos navegadores. Polyfill JavaScript de CSS Regions

Preserve a composição tipográfica do navegador ao adaptar o layout

Sempre que possível, mantenha os parágrafos completos como texto do navegador. Evite estimar a capacidade de uma região atribuindo a ela um número fixo de caracteres. A especificação de texto do W3C descreve a composição tipográfica entre limites de elementos inline e as condições que a interrompem, incluindo alterações de espaçamento, alinhamento ou isolamento. Portanto, dividir o texto em fragmentos e aplicar estilos independentes pode alterar mais do que sua posição. CSS Text Module Level 3

A medição de texto em Canvas também não é suficiente para compor o layout de um artigo. O WHATWG especifica que measureText() retorna métricas do texto fornecido, enquanto fillText() desenha texto em coordenadas. O algoritmo de preparação do texto usa uma caixa de linha de largura infinita; uma largura máxima fornecida pode fazer com que o texto seja ajustado a essa largura. Essas operações não dão continuidade automática a um parágrafo por várias regiões do DOM. HTML Standard: Canvas

Para esta tarefa, as colunas nativas mantêm no navegador a responsabilidade pela quebra de linha e pela renderização do texto. Se regiões arbitrárias no navegador continuarem sendo obrigatórias, uma implementação personalizada precisará levar em conta alterações no texto, métricas de fonte, dimensões disponíveis e conteúdo não posicionado. Trate isso como um projeto de layout separado, não como um pequeno script para dividir caracteres.

Antes de definir o design, examine-o numa janela larga, numa janela estreita e com o texto do navegador ampliado. Acompanhe o artigo do primeiro parágrafo até END-A, confira a ordem de continuação e procure conteúdo cortado ou deslocado horizontalmente. Use colunas no navegador quando o fluxo regular atender à tarefa, Paged.js quando o destino forem páginas e encadeamentos do Pages quando o posicionamento de cada caixa determinar a composição.

Fontes