Modos de escrita e layout CSS

Este não é um artigo sobre a aplicação prática ou criativa desta propriedade. Em vez disso, quero demonstrar por que entender os modos de escrita é tão importante – mesmo para aqueles de nós que raramente precisam alterar o modo de escrita de uma página ou componente. O suporte de vários modos de escrita é fundamental para a forma como nossos novos métodos de layout Flexbox e Grid Layout foram projetados. Compreender isso pode desbloquear uma melhor compreensão de como esses métodos de layout funcionam.

O que são modos de escrita?

O modo de escrita de um documento ou componente refere-se à direção em que o texto flui. Em CSS, para trabalhar com modos de escrita usamos a propriedade writing-mode . Esta propriedade pode assumir os seguintes valores:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Se você estiver lendo este artigo na Smashing Magazine em inglês, o modo de escrita deste documento é horizontal-tb ou Horizontal Top To Bottom . Em inglês, as frases são escritas horizontalmente – a primeira letra de cada linha começando à esquerda.

Um idioma como o árabe também possui um modo de escrita horizontal-tb . É escrito horizontalmente, de cima para baixo, no entanto, a escrita árabe é escrita da direita para a esquerda e, portanto, as frases em árabe começam à direita.

Chinês, japonês e coreano são escritos verticalmente, com o primeiro caractere da primeira frase no canto superior direito. As seguintes frases são adicionadas à esquerda. Portanto, o modo de escrita usado é vertical-rl . Um modo de escrita vertical que funciona da direita para a esquerda.

Mongol também é escrito verticalmente, mas da esquerda para a direita. Portanto, se você quiser compor o script mongol, você usaria o modo de escrita vertical-lr .

Os outros dois valores do writing-mode são projetados mais para fins criativos do que para composição de scripts verticais. Usar sideways-lr e sideways-rl vira o texto de lado — até mesmo caracteres normalmente escritos na vertical e na vertical. Os valores, infelizmente, só são suportados no Firefox no momento. O CodePen a seguir mostra todos os diferentes valores de write writing-mode , você precisará usar o Firefox se quiser ver os sideways-* em ação.

Modos de escrita podem ser usados ​​ao criar um documento que usa um idioma escrito usando esse modo de escrita. Eles também podem ser usados ​​de forma criativa, por exemplo, para definir um título verticalmente na lateral de algum conteúdo. Neste artigo, no entanto, quero dar uma olhada no impacto que o suporte a linguagens verticais e a possibilidade de texto vertical têm no layout CSS e no CSS em geral.

Antes de fazer isso - se você estiver interessado no uso de modos de escrita para texto vertical - aqui estão alguns recursos úteis:

• O site de Internacionalização do W3C tem muitas informações úteis. Leia sobre scripts RTL e texto vertical.
• Jen Simmons escreveu um excelente artigo sobre CSS Writing Modes que também inclui vários exemplos de impressão desses modos em uso.
• Pensamentos sobre o mundo e nossos sistemas de escrita - Chen Hui Jing
• Tipografia vertical com modo de escrita revisitado - Chen Hui Jing
• A propriedade do modo de escrita no MDN

O bloco e as dimensões em linha

Quando alteramos o modo de escrita de um documento, o que estamos fazendo é mudar a direção do fluxo de blocos . Portanto, rapidamente se torna muito útil para nós entendermos o que se entende por bloco e inline.

Uma das primeiras coisas que aprendemos sobre CSS é que alguns elementos são elementos de bloco, por exemplo, um parágrafo. Esses elementos são exibidos um após o outro na direção do bloco. Elementos embutidos, como uma palavra em uma frase, são exibidos um após o outro na direção em linha. Trabalhando em um modo de escrita horizontal, nos acostumamos com o fato de que a dimensão do bloco corre de cima para baixo verticalmente e a dimensão em linha da esquerda para a direita horizontalmente.

Como os elementos de bloco e em linha se relacionam com o modo de escrita do nosso documento, no entanto, a dimensão em linha é horizontal apenas se estivermos no modo de escrita horizontal. Não se relaciona com a largura, mas sim com o tamanho embutido. A dimensão do bloco só é vertical quando em modo de escrita horizontal. Portanto, não está relacionado à altura, mas ao tamanho do bloco.

Propriedades lógicas, relativas ao fluxo

Esses termos, tamanho inline e tamanho do bloco também são usados ​​como os nomes das novas propriedades CSS projetadas para refletir nosso novo mundo ciente do modo de escrita. Se, em um modo de escrita horizontal, você usar a propriedade inline-size em vez de width , ela atuará exatamente da mesma maneira que largura - até que você alterne o modo de escrita do seu componente. Se você usar width que sempre será uma dimensão física, sempre será o tamanho do componente horizontalmente. Se você usar inline-size , esse será o tamanho na dimensão inline, como mostra o exemplo abaixo.

O mesmo vale para a height . A propriedade height sempre será o tamanho vertical. Relaciona-se com a altura do item. A propriedade block-size , no entanto, fornece o tamanho na dimensão do bloco , verticalmente se estivermos no modo de escrita horizontal e horizontal no vertical.

Como descrevi em meu artigo “Entendendo Propriedades Lógicas e Valores”, existem mapeamentos para todas as propriedades físicas, aquelas que estão vinculadas às dimensões da tela. Uma vez que você começa a pensar sobre isso, muito do CSS é especificado em relação ao layout físico de uma tela. Definimos posicionamento, margens, preenchimento e bordas usando superior, direita, inferior e esquerda. Nós flutuamos as coisas para a esquerda e para a direita. Às vezes, amarrar as coisas à dimensão física será o que queremos, porém cada vez mais estamos pensando em nossos layouts sem referência à localização física. A especificação Logical Properties and Values ​​implementa essa maneira agnóstica de modo de escrita de trabalhar diretamente em CSS.

Modos de escrita, grade e Flexbox

Quando nossos novos métodos de layout entraram em cena, eles trouxeram com eles uma maneira agnóstica de ver o modo de escrita do componente que está sendo apresentado como um layout flexível ou de grade. Pela primeira vez, as pessoas estavam sendo solicitadas a pensar em início e fim, em vez de esquerda e direita, superior e inferior.

Quando comecei a apresentar o assunto CSS Grid, minhas primeiras apresentações eram um resumo de todas as propriedades da especificação. Mencionei que a propriedade grid-area pode ser usada para definir todas as quatro linhas para colocar um item de grade. A ordem dessas linhas não era, no entanto, a familiar superior, direita, inferior e esquerda que usamos para definir todas as quatro margens. Em vez disso, precisamos usar top, left, bottom, right - o inverso dessa ordem! Até eu entender a conexão entre os modos de grade e escrita, isso parecia uma decisão muito estranha. Percebi que o que estamos fazendo é definir as duas linhas de partida, depois as duas linhas de chegada. Usar top, right, bottom e left funcionaria bem se estivéssemos no modo de escrita horizontal, mas vire a grade de lado e isso não faz sentido. Se usarmos grid-area: 1 / 2 / 3 / 5; como na caneta abaixo as linhas são definidas da seguinte forma:

• grid-row-start: 1; - início do bloco
• grid-column-start: 2 - início inline
• grid-row-end: 3 - final do bloco
• grid-column-end: 5 - final inline

Linhas e colunas do Flexbox

Se você usar o Flexbox e adicionar display: flex a um contêiner, seus itens serão exibidos como uma linha, pois o valor inicial da propriedade flex-direction é row . Uma linha seguirá a dimensão em linha do modo de escrita em uso. Portanto, se o seu modo de escrita for horizontal-tb uma linha será executada horizontalmente. Se a direção do texto do script atual for da esquerda para a direita, os itens serão alinhados a partir da esquerda, se for da direita para a esquerda, eles serão alinhados a partir da direita.

No entanto, use um modo de escrita vertical, como vertical-rl e flex-direction: row fará com que os itens sejam dispostos verticalmente, pois a direção em linha é vertical. Neste próximo CodePen todos os exemplos têm flex-direction: row , apenas o modo de escrita ou direção foi alterado.

Adicione flex-direction: column e o layout dos itens na dimensão do bloco do seu modo de escrita. Em um modo de escrita horizontal, a dimensão do bloco é de cima para baixo, então uma coluna é vertical. Com um modo de escrita de vertical-rl uma coluna é horizontal. Assim como no exemplo anterior, a única diferença entre os layouts flexíveis abaixo é o modo de escrita que está sendo usado.

Posicionamento Automático de Grade

Ao usar o posicionamento automático na grade, você verá um comportamento semelhante ao do layout flexível. Os itens da grade são posicionados automaticamente de acordo com o modo de escrita do documento. O padrão é colocar itens em linhas, que serão a direção em linha - horizontalmente no modo de escrita horizontal e verticalmente no modo vertical.

Tente alterar o fluxo de itens para column como no exemplo abaixo. Os itens agora fluirão na dimensão do bloco - verticalmente no modo de escrita horizontal e horizontalmente no modo vertical.

Posicionamento colocado em linha de grade

O posicionamento baseado em linha também respeita o modo de escrita. As linhas da nossa grade começam em 1, tanto para linhas quanto para colunas. Se posicionarmos um item da linha de coluna 1 para a linha de coluna 3 e estivermos em um modo de escrita horizontal com uma direção da esquerda para a direita, esse item se estenderá da linha da coluna mais à esquerda em duas faixas de grade horizontalmente. Assim, abrangendo duas colunas.

Altere o modo de escrita para vertical-rl e a linha de coluna 1 estará na parte superior da grade, o item abrangendo duas faixas verticalmente. Ainda abrangendo duas colunas, mas as colunas agora estão sendo executadas horizontalmente.

Alinhamento na grade e no Flexbox

Um dos primeiros lugares em que muitas pessoas terão contato com a forma como o Flexbox lidava com os modos de escrita, seria ao alinhar itens em um layout flexível. Se pegarmos o exemplo flex-direction: row acima e usar a propriedade justify-content para alinhar todos os itens para flex-end os itens serão movidos para o final de sua linha. Isso significa que em um modo de escrita horizontal com direcionamento da esquerda para a direita, todos os itens se movem para a direita, pois o final dessa linha está à direita. Se a direção for da direita para a esquerda, todos se moverão para a esquerda.

No modo de escrita vertical, eles se movem para baixo, supondo que haja espaço para isso. Eu defini um inline-size nos componentes neste exemplo para garantir que tenhamos espaço livre em nossos contêineres flexíveis para ver o alinhamento em ação.

O alinhamento é um pouco mais fácil de entender no layout de grade, pois sempre temos os dois eixos para brincar. A grade é bidimensional, essas duas dimensões são em bloco e em linha. Portanto, você pode se lembrar de uma regra se quiser saber se deve usar as propriedades que começam com align- ou aquelas que começam com justify- . No layout de grade, as propriedades align:- align-content , align-items , align-self são usadas para fazer o align- do eixo do bloco. Em um modo de escrita horizontal que significa verticalmente, e em um modo de escrita vertical horizontalmente.

Mais uma vez, não usamos esquerda e direita ou superior e inferior, pois queremos que nosso layout de grade funcione exatamente da mesma maneira, independentemente do modo de escrita. Então nós alinhamos usando start e end . Se alinharmos para start na dimensão do bloco, ela será top quando em horizontal-tb , mas estará right quando em vertical-rl . Dê uma olhada no exemplo abaixo, os valores de alinhamento são idênticos em ambas as grades, a única diferença é o modo de escrita utilizado.

As propriedades justify-content , justify-items , justify-self são sempre usadas para alinhamento inline no layout da grade. Isso será horizontal no modo de escrita horizontal e vertical no modo de escrita vertical.

O alinhamento do Flexbox é um pouco complicado pelo fato de que o eixo principal pode ser alternado de linha para coluna. Portanto, no Flexbox, precisamos pensar no método de alinhamento como o eixo principal versus o eixo cruzado. As propriedades de align- são usadas no eixo cruzado. No eixo principal, tudo o que você tem é justify-content porque lidamos com itens como um grupo no Flexbox. No eixo cruzado, você pode usar align-content nos casos em que tiver várias linhas flexíveis e espaço no contêiner flexível para espaçá-las. Você também pode usar align-items e align-self para mover os itens flexíveis no eixo cruzado em relação uns aos outros e sua linha flexível.

Para saber mais sobre alinhamento no layout CSS, veja meus artigos anteriores da Smashing Magazine:

• Como alinhar as coisas em CSS
• Tudo o que você precisa saber sobre alinhamento no Flexbox

Conscientização do modo de escrita e CSS mais antigo

Nem todo CSS alcançou totalmente essa maneira de trabalhar agnóstica, relativa ao fluxo e modo de escrita. Os lugares onde não começou a se destacar como incomuns quanto mais você pensa nas coisas em termos de bloco e em linha, início e fim. Por exemplo, em um layout de várias colunas, especificamos column-width , o que realmente significa tamanho inline da coluna, pois não é mapeado para a largura física ao trabalhar em um modo de escrita vertical.

Como você pode ver, os modos de escrita sustentam muito do que fazemos em CSS, mesmo que nunca usemos um modo de escrita diferente de horizontal-tb .

Acho incrivelmente útil pensar sobre o layout CSS neste modo de escrita agnóstico. Embora talvez seja um pouco cedo para mudar todas as nossas propriedades e valores para os lógicos, já estamos em um mundo relativo ao fluxo ao lidar com novos métodos de layout. Ter seu modelo mental de bloco e em linha, início e fim, em vez de ficar preso aos quatro cantos da tela, esclarece muitas das coisas que encontramos ao usar o FlexBox e a grade.