Sintaxe para recursos OpenType em CSS

Abordaremos detalhadamente cada um dos recursos OpenType, com exemplos específicos de cada um. Para ter uma visão mais ampla sobre como ativar os recursos OpenType em seus projetos da Web e usá-los em CSS, consulte nosso documento de ajuda em Usar recursos OpenType em CSS.

Ligaduras

• Ligaduras comuns/padrão (liga)
• Alternativas contextuais (calt)
• Ligaduras discricionárias (dlig)

Letras

• Versaletes (smcp)
• Maiúsculas em versaletes (c2sc)
• Swashes (swsh)
• Alternativas estilísticas (salt)

Números

• Números alinhados (lnum)
• Números de estilo antigo (onum)
• Números proporcionais (pnum)
• Números tabulares (tnum)
• Frações (frac)
• Ordinais (ordn)

Conjuntos estilísticos

• Conjuntos estilísticos 01–20 (ss##)

Escrita do Leste Asiático

Variantes de largura

• Larguras proporcionais (pwid)
• Larguras proporcionais alternativas (palt)
• Kana proporcional (pkna)
• Larguras inteiras (fwid)
• Meia largura (hwid)
• Meia largura alternativa (halt)
• Terço de largura (twid)
• Quarto de largura (qwid)

Variantes culturais

• Formas JIS78 (jp78)
• Formas JIS83 (jp83)
• Formas JIS90 (jp90)
• Formas JIS2004 (jp04)
• Formas tradicionais (trad)
• Formas de notação Ruby (ruby)
• Alternativas kana horizontais (hkna)
• Formas kanji NLC (nlck)
• Formas de anotação alternativas (nalt)
• Itálicos (ital)

Recursos verticais

• Observação: sobre recursos verticais
• Kerning vertical (vkrn)
• Alternativas verticais (vert)
• Métricas verticais alternativas proporcionais (vpal)
• Meia medida vertical alternativa (vhal)
• Alternativas kana verticais (vkna)

Mais

• Kerning (kern)
• Composição/decomposição de glifos (ccmp)
• Formas localizadas (locl)
• Sobrescrito (sups)
• Subscrito (subs)

Exemplo de ligaduras na prática, definidas em Warnock Pro.

Esse recurso substitui uma sequência de glifos por um único glifo, denominado ligadura, que é preferencial para fins tipográficos. Quando ativado, esse recurso insere as ligaduras que o designer/fabricante julga que devem ser usadas em condições normais.

O recurso de ligaduras está ativado por padrão, o que significa que deve funcionar sem a necessidade de escrever CSS, mas não está ativado por padrão no Chrome. Além disso, ele não pode ser desativado no Safari (Mac ou iOS). Algumas versões do Chrome e do Firefox não lidam bem com ligaduras que contêm espaços. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-ligatures, use o valor common-ligatures, que ativa as ligaduras comuns e contextuais. Tal como as alternativas contextuais, as ligaduras contextuais têm lógica condicional integrada que aplica glifos de substituição apenas em situações específicas. Para obter o mesmo efeito com font-feature-settings, use as tags de recurso “liga” e “clig”. Consulte também: Sintaxe para usar vários recursos OpenType.

Para desativar esse recurso, use o valor no-common-ligatures e um índice numérico de zero para font-feature-settings.

Alternativas contextuais (calt)

Exemplo de alternativas contextuais na prática, definidas em Caflisch Script Pro.

Em situações específicas, esse recurso substitui os glifos padrão por formas alternativas que oferecem um comportamento de junção mais adequado. Como as ligaduras (embora não sejam rigorosamente um recurso de ligadura), as alternativas contextuais normalmente são usadas para harmonizar as formas dos glifos com o contexto.

O recurso de alternativas contextuais está ativado por padrão, o que significa que deve funcionar sem a necessidade de escrever CSS, mas não está ativado por padrão no Chrome. Além disso, ele não pode ser desativado no Safari (Mac ou iOS). 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-ligatures, use o valor contextual. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “calt”.

Para desativar esse recurso, use o valor no-contextual e um índice numérico de zero para font-feature-settings.

Ligaduras discricionárias (dlig)

Exemplo de ligaduras discricionárias na prática, definidas em Warnock Pro.

Esse recurso substitui uma sequência de glifos por um único glifo (uma ligadura), que é preferencial para fins tipográficos. Quando ativado, esse recurso insere ligaduras que podem ser usadas para obter um efeito especial.

O recurso de ligaduras discricionárias está desativado por padrão.

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-ligatures, use o valor discretionary-ligatures. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “dlig”.

Versaletes (smcp)

Exemplo de versaletes na prática, definidos em Warnock Pro.

Esse recurso transforma caracteres minúsculos em versaletes.

O recurso de versaletes está desativado por padrão.

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-caps, use o valor small-caps. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “smcp”.

Observe que, em algumas fontes, o recurso de versaletes também pode incluir outras formas. De acordo com a especificação OpenType, o recurso OpenType smcp “pode incluir formas relacionadas a versaletes, como números de estilo antigo”.

Maiúsculas em versaletes (c2sc)

Exemplo de maiúsculas em versaletes na prática, definidas em Warnock Pro.

Esse recurso transforma maiúsculas em versaletes.

O recurso de maiúsculas em versaletes está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-caps, use o valor all-small-caps, que transforma caracteres maiúsculos e minúsculos em versaletes. Esse comportamento faz sentido, porque raramente você deseja aplicar versaletes apenas a caracteres maiúsculos. Para obter o mesmo efeito com font-feature-settings, use as tags de recurso “c2sc” e “smcp”. Consulte também: Sintaxe para usar vários recursos OpenType.

Swashes (swsh)

Exemplo de swashes na prática, definidos em Bickham Script Pro 3.

Esse recurso substitui os glifos de caractere padrão pelos glifos de swash correspondentes.

O recurso swashes está desativado por padrão. 

Para ativá-lo com font-feature-settings, use a tag de recurso “swsh”. Observe que pode haver mais de um swash alternativo para determinado caractere. Para acessar swashes alternativos, adicione um índice numérico ao valor:

Isso ativa o segundo swash disponível, se ele existir na fonte. Como você provavelmente imagina, usar um valor “swsh”, como em nosso primeiro exemplo de código, é equivalente a usar um valor “swsh” 1.

Por enquanto, vamos pular a propriedade font-variant, porque seus valores “denominados” (como swash (flowing)) são mapeados para índices numéricos de swash pelas definições de CSS de font-feature-value, que ainda não são compatíveis com nenhum navegador importante.

Alternativas estilísticas (salt)

Exemplo de alternativas estilísticas na prática, definidos em Bree.

Esse recurso substitui os glifos de caractere padrão por alternativas estilísticas. Consulte também: conjuntos estilísticos (ss##).

O recurso de alternativas estilísticas está desativado por padrão. 

Para ativá-lo com font-feature-settings, use a tag de recurso “salt”. Observe que pode haver mais de uma alternativa estilística para determinado caractere. Para acessar outras alternativas estilísticas, adicione um índice numérico ao valor:

Isso ativa a segunda alternativa estilística disponível, se ela existir na fonte. Como você provavelmente imagina, usar um valor “salt”, como em nosso primeiro exemplo de código, é equivalente a usar um valor “salt” 1.

Por enquanto, vamos pular a propriedade font-variant porque seus valores “denominados” (dos quais não há nenhum bom exemplo) são mapeados para índices numéricos de alternativa estilística pelas definições de CSS de font-feature-value, que ainda não são compatíveis com nenhum navegador importante.

Números alinhados (lnum)

Exemplo de números alinhados na prática, definidos em Warnock Pro.

Esse recurso muda os glifos numéricos de números padrão ou de estilo antigo para números alinhados. Observe que, em algumas fontes, o estilo de números alinhados pode ser padrão. Nesse caso, a ativação desse recurso talvez pareça não afetar o estilo dos glifos.

O recurso de números alinhados está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor lining-nums. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “lnum”.

Números de estilo antigo (onum)

Exemplo de números de estilo antigo na prática, definidos em Warnock Pro.

Esse recurso muda os glifos numéricos de números padrão ou alinhados para números de estilo antigo. Observe que, em algumas fontes, o estilo de números antigos pode ser padrão. Nesse caso, a ativação desse recurso talvez pareça não afetar o estilo dos glifos.

O recurso de números de estilo antigo está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor oldstyle-nums. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “onum”.

Números proporcionais (pnum)

Exemplo de números proporcionais na prática, definidos em Hypatia Sans Pro.

Esse recurso substitui glifos numéricos definidos em larguras uniformes (tabulares) por glifos correspondentes definidos em larguras específicas (proporcionais). Observe que, em algumas fontes, o estilo de números proporcionais pode ser padrão. Nesse caso, a ativação desse recurso talvez pareça não afetar a largura dos glifos.

O recurso de números proporcionais está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor proportional-nums. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “pnum”.

Números tabulares (tnum)

Exemplo de números tabulares na prática, definidos em Hypatia Sans Pro.

Esse recurso substitui glifos numéricos definidos em larguras específicas (tabulares) por glifos correspondentes definidos em larguras uniformes (tabulares). Observe que, em algumas fontes, o estilo de números tabulares pode ser padrão. Nesse caso, a ativação desse recurso talvez pareça não afetar a largura dos glifos.

O recurso de números tabulares está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor tabular-nums. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “tnum”.

Frações (frac)

Exemplo de frações na prática, definidas em Warnock Pro.

Este recurso substitui os números separados por barra por frações comuns (diagonais).

O recurso frações está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor diagonal-fractions. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “frac”.

Ordinais (ordn)

Exemplo de ordinais na prática, definidos em Warnock Pro.

Esse recurso substitui os glifos alfabéticos padrão pelas formas ordinais correspondentes, para uso após os números.

O recurso ordinais está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-numeric, use o valor ordinal. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “ordn”.

Observe que nem todas as substituições de glifo ocorrem após os números. De acordo com a especificação OpenType, “Uma exceção à regra após o número é o caractere abreviado de número (U + 2116), que na verdade é uma substituição de ligadura, mas seu acesso é mais adequado por meio desse recurso”.

Conjuntos estilísticos (ss##)

Exemplo de conjuntos estilísticos na prática, definidos em Hypatia Sans Pro.

Esse recurso substitui os conjuntos de caracteres padrão por variantes estilísticas. Nos conjuntos estilísticos, os glifos podem ser usados para oferecer harmonia visual, interagir de uma maneira específica ou funcionar juntos de outra forma. Consulte também: alternativas estilísticas (salt), cujo objetivo é oferecer alternativas estilísticas de glifos específicos.

O recurso de conjuntos estilísticos está desativado por padrão. 

Para ativá-lo com a propriedade font-feature-settings, use a tag de recurso “ss##”, onde “##” representa qualquer combinação de dois dígitos de 01–20. Observe que as fontes usam conjuntos estilísticos de uma maneira completamente arbitrária e personalizada. Por exemplo, duas fontes diferentes podem usar o mesmo recurso (como ss01) para substituir conjuntos de glifos totalmente diferentes, ou uma fonte específica pode usar ss01 e ss03 para substituir conjuntos de glifos, mas ignorar ss02. Alguns fornecedores de fontes oferecem documentação sobre como os recursos são organizados.

Por enquanto, vamos pular a propriedade font-variant porque seus valores “denominados” (como styleset(sharp-serifs)) são mapeados para índices numéricos de conjuntos estilísticos pelas definições de CSS de font-feature-value, que ainda não são compatíveis com nenhum navegador importante.

Larguras proporcionais (pwid)

Exemplo de largura proporcional na prática, definida em Kozuka Mincho Pr6n:

Esse recurso substitui os glifos definidos em larguras uniformes (normalmente largura inteira ou meio eme) por glifos espaçados proporcionalmente. As variantes proporcionais frequentemente são usadas para caracteres latinos em fontes CJKV, mas também podem ser usadas para kana em fontes japonesas. (Fonte.)

O recurso de largura proporcional está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor proportional-width. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “pwid”.

Larguras proporcionais alternativas (palt)

Exemplo de larguras proporcionais alternativas na prática, definidas em Source Han Sans:

Esse recurso redefine o espaçamento de glifos criados para serem definidos em larguras eme inteiras, ajustando-os em larguras horizontais específicas (mais ou menos proporcionais). Ele é diferente de pwid porque não substitui novos glifos (GPOS, e não o recurso GSUB). O usuário pode preferir a forma de espaçamento fixo ou simplesmente desejar que o glifo fique bem ajustado e não gire na configuração vertical (as formas latinas projetadas para espaçamento proporcional giram). (Fonte.)

O recurso de larguras proporcionais alternativas está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “palt”.

Kana proporcional (pkna)

Exemplo de kana proporcional na prática, definido em Kozuka Mincho Pr6n:

Esse recurso substitui os glifos kana e relacionados a kana definidos em larguras uniformes (meia largura ou largura inteira) por glifos proporcionais. Ele é semelhante ao recurso de larguras proporcionais, mas afeta apenas o kana. (Fonte.)

O recurso de kana proporcional está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “pkna”.

Larguras inteiras (fwid)

Exemplo de larguras inteiras na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui glifos definidos em outras larguras por glifos definidos em larguras inteiras (geralmente eme). Em uma fonte CJKV, isso pode incluir caracteres latinos “ASCII minúsculos” e vários símbolos. Em uma fonte europeia, esse recurso substitui glifos com espaçamento proporcional por glifos com espaçamento fixo, que geralmente são definidos em larguras de 0,6 eme. (Fonte.)

O recurso de larguras inteiras está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor full-width. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “fwid”.

Meia largura (hwid)

Exemplo de meia largura na prática, definida em Kozuka Mincho Pr6n:

Esse recurso substitui glifos em larguras proporcionais ou larguras fixas diferentes de meio eme por glifos em larguras de meio eme (ene). Muitas fontes CJKV têm glifos configurados em várias larguras. Esse recurso seleciona a versão de meio eme. Existem vários contextos em que esse comportamento é o preferido, como compatibilidade com documentos de desktop mais antigos. (Fonte.)

O recurso de meia largura está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “hwid”.

Meia largura alternativa (halt)

Exemplo de meia largura alternativa na prática, definida em Kozuka Mincho Pr6n:

Esse recurso redefine o espaçamento de glifos criados para serem definidos em largura inteira, ajustando-os em meia largura eme. Ele é diferente de hwid porque não substitui novos glifos. (Fonte.)

O recurso de meia largura alternativa está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “halt”.

Terço de largura (twid)

Exemplo de terço de largura na prática, definido em Kozuka Mincho Pr6n:

Esse recurso substitui glifos definidos em outras larguras por glifos definidos com um terço da largura eme. Os caracteres em questão normalmente são números e algumas formas de pontuação. (Fonte.)

O recurso de terço de largura está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “twid”.

Quarto de largura (qwid)

Exemplo de quarto de largura na prática, definido em Kozuka Mincho Pr6n:

Esse recurso substitui glifos definidos em outras larguras por glifos definidos com um quarto da largura eme (metade de um ene). Os caracteres em questão normalmente são números e algumas formas de pontuação. (Fonte.)

O recurso de quarto de largura está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “qwid”.

Formas JIS78 (jp78)

Exemplo de formas JIS78 na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui os glifos japoneses padrão (JIS90) pelas formas correspondentes da especificação JIS C 6226-1978 (JIS78). (Fonte.)

O recurso de formas JIS78 está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor jis78. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “jp78”.

Formas JIS83 (jp83)

Exemplo de formas JIS83 na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui os glifos japoneses padrão (JIS90) pelas formas correspondentes da especificação JIS X 0208-1983 (JIS83). (Fonte.)

O recurso de formas JIS83 está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor jis83. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “jp83”.

Formas JIS90 (jp90)

Exemplo de formas JIS90 na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui os glifos japoneses da especificação JIS78 ou JIS83 pelas formas correspondentes da especificação JIS X 0208-1990 (JIS90). (Fonte.)

O recurso de formas JIS90 está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor jis90. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “jp90”.

Formas JIS2004 (jp04)

Exemplo de formas JIS2004 na prática, definidas em Kozuka Mincho Pro:

O Conselho Nacional de Linguagem (NLC) do Japão definiu novas formas de glifo para vários caracteres JIS, que foram incorporadas ao JIS X 0213:2004 como novas formas prototípicas. O recurso “jp04” é um subconjunto do recurso “nlck”e é usado para acessar esses glifos prototípicos de uma maneira que mantém a integridade do JIS X 0213:2004. (Fonte.)

O recurso de formas JIS2004 está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor jis04. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “jp04”.

Formas tradicionais (trad)

Exemplo de formas tradicionais na prática, definidas em Kozuka Mincho Pr6n:

Substitui as formas “simplificadas” do hanzi chinês ou do kanji japonês pelas formas “tradicionais” correspondentes. (Fonte.)

O recurso de formas tradicionais está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor traditional. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “trad”.

Formas de notação Ruby (ruby)

Exemplo de formas de notação ruby na prática, definidas em Kozuka Mincho Pr6n:

A composição tipográfica japonesa geralmente usa glifos kana menores, normalmente em forma sobrescrita, para esclarecer o significado do kanji, que pode ser desconhecido para o leitor. Eles são chamados de ruby, do antigo termo de composição para tipos de tamanho de quatro pontos. Esse recurso identifica glifos na fonte que foram criados para esse uso, substituindo-os pelos designs padrão. (Fonte.)

O recurso de formas de notação ruby está desativado por padrão. Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-east-asian, use o valor ruby. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “ruby”.

No exemplo de código acima, observe o elemento rt que estamos estilizando. A marcação adequada para texto ruby é explicada na especificação HTML5 do W3C, na seção sobre semântica textual. Observe também que a posição e o tamanho do texto ruby variam entre navegadores/versões. Considere a possibilidade de desativar os padrões do navegador com uma folha de estilo de redefinição e dimensionar/posicionar o texto ruby manualmente.

Alternativas kana horizontais (hkna)

Exemplo de alternativas kana horizontais na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui o kana padrão por formas que foram criadas especialmente para escrita horizontal. Trata-se de uma otimização tipográfica para melhorar o ajuste e obter cores mais uniformes. (Fonte.)

O recurso de alternativas kana horizontais está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “hkna”.

Formas kanji NLC (nlck)

Exemplo de formas kanji NLC na prática, definidas em Kozuka Mincho Pr6n:

Em 2000, o Conselho Nacional de Linguagem (NLC) do Japão definiu novas formas de glifo para inúmeros caracteres JIS. O recurso “nlck” é usado para acessar esses glifos. (Fonte.)

O recurso de formas kanji NLC está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “nlck”.

Formas de anotação alternativas (nalt)

Exemplo de formas de anotação alternativas na prática, definidas em Kozuka Mincho Pr6n:

Esse recurso substitui glifos padrão por várias formas de anotação (por exemplo, glifos colocados em círculos abertos ou sólidos, quadrados, parênteses, losangos ou caixas arredondadas). Em alguns casos, talvez já exista uma forma de anotação, mas o usuário pode querer uma diferente. (Fonte.)

O recurso de formas de anotação alternativas está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “nalt”.

Itálicos (ital)

Exemplo de itálicos na prática, definidos em Kozuka Mincho Pr6n:

Algumas fontes (como as fontes Pro Japanese da Adobe) incluem as formas romana e itálica de alguns caracteres em uma única fonte. Esse recurso substitui os glifos romanos pelos glifos itálicos correspondentes. (Fonte.)

O recurso de itálicos está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “ital”.

Observação: sobre recursos verticais

Os recursos OpenType a seguir ajudam a melhorar a aparência do texto com orientação vertical, redefinindo o espaçamento e substituindo os glifos. No entanto, a compatibilidade dos navegadores com texto com orientação vertical é restrita. Portanto, mesmo que esses recursos OpenType sejam compatíveis e funcionem corretamente, se não houver compatibilidade para a orientação vertical, não adiantará nada.

Aqui, nosso código se baseia no CSS Writing Modes Level 3 Editor’s Draft do W3C e nesta pesquisa incrível de David Storey. Você pode ver como isso está tomando forma, mas a compatibilidade com os navegadores simplesmente é inexistente no momento. Testamos o código acima e o modo de escrita só funcionou no Chrome.

Kerning vertical (vkrn)

Esse recurso ajusta a quantidade de espaço entre os glifos, geralmente para fornecer um espaçamento opticamente consistente entre os glifos. Embora uma fonte bem projetada tenha espaçamento consistente entre os glifos em geral, algumas combinações de glifos requerem ajustes para melhorar a legibilidade. Além do ajuste padrão na direção vertical, esse recurso pode fornecer dados de kerning com base no tamanho por meio de tabelas de dispositivos, kerning “cross-stream” na direção X do texto e ajuste de inserção de glifo independente do ajuste avançado. Observe que esse recurso pode se aplicar a mais de dois glifos e não deve ser usado em fontes com espaçamento fixo. Observe também que esse recurso se aplica apenas a texto definido verticalmente. (Fonte.)

O recurso de kerning vertical está desativado por padrão e não é compatível com o Internet Explorer nem com nenhuma versão do Safari no macOS ou iOS. Além disso, embora esse recurso possa ser compatível com o Firefox, o texto vertical não é compatível. Portanto, na prática, ele é incompatível. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “vkrn”. Se vkrn estiver ativado, vpal também deverá ser ativado, se houver. Consulte também: Sintaxe para usar vários recursos OpenType e Observação: sobre recursos verticais.

Alternativas verticais (vert)

Esse recurso substitui as formas padrão por variantes ajustadas para escrita vertical no modo de escrita vertical. Embora a maioria dos glifos CJKV permaneçam verticais quando configurados no modo de escrita vertical, alguns assumem uma forma diferente (em geral, girados e reposicionados) nessa finalidade. Os glifos que esse recurso abrange correspondem ao conjunto normalmente girado em aplicativos DTP de baixo custo. (Fonte.)

O recurso de alternativas verticais está ativado por padrão, o que significa que deve funcionar sem a necessidade de escrever CSS, mas não está ativado por padrão em nenhuma versão do Internet Explorer ou do Firefox. Além disso, ele não pode ser ativado de forma alguma no Safari (Mac ou iOS). Consulte também: Observação: sobre recursos verticais.

A única maneira de ativar o recurso de alternativas verticais é com font-feature settings, usando a tag de recurso “vert”.

Métricas verticais alternativas proporcionais (vpal)

Esse recurso redefine o espaçamento de glifos criados para serem definidos em alturas inteiras eme, ajustando-os em alturas verticais adequadas (mais ou menos proporcionais). Ele é diferente de valt porque não substitui novos glifos (GPOS, e não o recurso GSUB). O usuário pode preferir a forma de espaçamento fixo ou simplesmente desejar que o glifo fique bem ajustado. (Fonte.)

O recurso de métricas verticais alternativas proporcionais está desativado por padrão e não é compatível com o Internet Explorar nem com nenhuma versão do Safari no macOS ou iOS. Além disso, embora esse recurso possa ser compatível com o Firefox, o texto vertical não é compatível. Portanto, na prática, ele é incompatível. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “vpal”. Consulte também: Observação: sobre recursos verticais.

Meia medida vertical alternativa (vhal)

Esse recurso redefine o espaçamento de glifos criados para serem definidos em altura inteira eme, ajustando-os em meia altura eme. (Fonte.)

O recurso de meia medida vertical alternativa está desativado por padrão e não é compatível com nenhuma versão do Internet Explorar, do Firefox ou do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “vhal”. Consulte também: Observação: sobre recursos verticais.

Alternativas kana verticais (vkna)

Esse recurso substitui o kana padrão por formas que foram criadas especialmente para escrita vertical. Trata-se de uma otimização tipográfica para melhorar o ajuste e obter cores mais uniformes. Consulte também hkna. (Fonte.)

O recurso de alternativas kana verticais está desativado por padrão e não é compatível com nenhuma versão do Safari no macOS ou iOS. A única maneira de ativá-lo é com font-feature settings, usando a tag de recurso “vkna”. Consulte também: Observação: sobre recursos verticais.

Kerning (kern)

Exemplo de kerning na prática, definido em Source Sans Pro:

Esse recurso ajusta a quantidade de espaço entre os glifos, geralmente para fornecer um espaçamento opticamente consistente entre os glifos. Embora uma fonte bem projetada tenha espaçamento consistente entre os glifos em geral, algumas combinações de glifos requerem ajustes para melhorar a legibilidade. Observe que esse recurso pode se aplicar a sequências de mais de dois glifos e não deve ser usado em fontes com espaçamento fixo. Observe também que esse recurso não se aplica apenas a texto definido verticalmente. (Fonte.)

O recurso de kerning está desativado por padrão, mas em muitos casos é importante ativá-lo.

Para ativá-lo com a propriedade font-kerning, use o valor normal. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “kern”.

Composição/decomposição de glifos (ccmp)

Exemplo de composição/decomposição de glifos na prática, definidas em Source Han Sans:

Para minimizar o número de glifos alternativos, às vezes é desejável decompor um caractere em dois glifos. Além disso, pode ser preferível compor dois caracteres em um único glifo para melhorar o processamento de glifos. Esse recurso permite essa composição/decomposição. Esse recurso deve ser processado como o primeiro recurso processado e apenas quando for chamado. (Fonte.)

O recurso de composição/decomposição de glifos está ativado por padrão, o que significa que ele deve funcionar sem a necessidade de escrever CSS, mas existem algumas condições complicadas para mantê-lo ativado. Esse recurso não está ativado por padrão no Chrome ou no Safari. Porém, se você usar qualquer valor de font-feature-settings, ele será ativado.

Para garantir que o recurso de composição/decomposição de glifos seja ativado, use a tag de recurso “ccmp” explicitamente ou qualquer outro valor de font-feature-settings.

Formas localizadas (locl)

Muitos sistemas usados para escrever vários idiomas em áreas geográficas abrangentes desenvolveram formas variantes localizadas de letras específicas, que são usadas por determinadas comunidades literárias. Por exemplo, várias letras nos alfabetos búlgaro e sérvio têm formas distintas de suas equivalentes russas e entre si. Em alguns casos, a forma localizada difere apenas sutilmente da “norma” do sistema. Em outros, as formas são radicalmente distintas. Esse recurso permite que as formas localizadas de glifo sejam substituídas por formas padrão. (Fonte.)

O recurso de formas localizadas está ativado por padrão, o que significa que deve funcionar sem a necessidade de escrever CSS, mas só está ativado por padrão no Firefox e não é de forma alguma compatível com o Safari (Mac ou iOS) ou o Android. 

Para garantir que o recurso de formas localizadas seja ativado, use a tag de recurso “locl” explicitamente.

Sobrescrito (sups)

Exemplo de sobrescrito na prática, definido em Hypatia Sans Pro.

Esse recurso substitui números alinhados ou de estilo antigo por números sobrescritos (principalmente em indicação de nota de rodapé) e letras minúsculas por letras sobrescritas (principalmente na abreviatura de títulos de tratamento em francês).

O recurso de sobrescrito está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-position, use o valor super. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “sups”.

Subscrito (subs)

Exemplo de subscrito na prática, definido em Warnock Pro.

Esse recurso pode substituir um glifo padrão por um glifo subscrito ou combinar uma substituição de glifo com ajustes para adequação do posicionamento.

O recurso de subscrito está desativado por padrão. 

Para ativá-lo com a propriedade font-variant ou a subpropriedade font-variant-position, use o valor sub. Para obter o mesmo efeito com font-feature-settings, use a tag de recurso “subs”.