Propriedade CSS text-decoration-skip-ink
Use a propriedade CSS text-decoration-skip-ink para definir como sublinhados e sobrelinhas devem ser desenhados. Veja os valores e exemplos.
A propriedade text-decoration-skip-ink controla como sublinhados e sobrelinhas se comportam ao passar pelas partes de uma letra que descem abaixo da linha de base (descendentes, como as caudas do "g", "y", "p") ou sobem acima dela (ascendentes). Em vez de a linha cortar diretamente por esses traços, o navegador pode deixar pequenas lacunas para que a linha "pule" a tinta do glifo — que é a origem do nome.
Este é um recurso de legibilidade. Um sublinhado sólido que corta um "g" ou "j" pode dificultar a leitura do texto; pular a tinta mantém o sublinhado visualmente limpo. Os navegadores modernos ativam esse comportamento por padrão (auto), portanto esta propriedade é usada principalmente para desativá-lo (none) quando se deseja uma linha contínua e ininterrupta.
text-decoration-skip-ink afeta apenas os valores underline e overline da propriedade text-decoration-line. O valor line-through fica no meio do texto, em vez de cruzar descendentes, por isso não é afetado.
A propriedade text-decoration-skip-ink faz parte da família abreviada text-decoration, ao lado de text-decoration-line, text-decoration-color e text-decoration-style.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdada | Sim. |
| Animável | Não. |
| Versão | CSS Text Decoration Module Level 4 |
| Sintaxe DOM | object.style.textDecorationSkipInk = "none"; |
Sintaxe
Valores de CSS text-decoration-skip-ink
text-decoration-skip-ink: auto | none | initial | inherit;A forma abreviada também aceita as palavras-chave globais initial e inherit. Como a propriedade é herdada e tem como padrão auto, raramente é necessário defini-la explicitamente, exceto para desativar o pulo da tinta.
Exemplo da propriedade text-decoration-skip-ink
O exemplo abaixo coloca os dois estados lado a lado: o primeiro parágrafo força um sublinhado contínuo (none), enquanto o segundo permite que o navegador pule a tinta ao redor dos descendentes (auto). Compare como a linha se comporta sob letras como "p".
Exemplo de código CSS text-decoration-skip-ink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.ex1 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: none;
}
.ex2 {
margin: 0;
font-size: 2em;
text-decoration: underline #1c87c9;
text-decoration-skip-ink: auto;
}
</style>
</head>
<body>
<h2>
Text-decoration-skip-ink property example
</h2>
<h3>
Text-decoration-skip-ink: none;
</h3>
<p class="ex1">
Lorem ipsum is simply dummy text
</p>
<h3>
Text-decoration-skip-ink:auto;
</h3>
<p class="ex2">
Lorem ipsum is simply dummy text
</p>
</body>
</html>Resultado
Valores
| Valor | Descrição |
|---|---|
| auto | Sublinhados e sobrelinhas são desenhados apenas onde não tocam ou se aproximam de um glifo. Este é o valor padrão desta propriedade. |
| none | Sublinhados e sobrelinhas são desenhados para todo o conteúdo de texto, incluindo as partes que cruzam descendentes e ascendentes de glifos. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Quando usar
- Mantenha o padrão (
auto) para texto de corpo e links. Ele produz sublinhados mais limpos e legíveis, com lacunas colocadas automaticamente ao redor dos descendentes. - Use
nonequando o design exigir uma linha sólida e ininterrupta — por exemplo, um sublinhado intencionalmente espesso usado como acento estilístico, ou quando pequenas lacunas parecem falhas de renderização em determinado tamanho de fonte.
Um padrão comum é redefinir para um valor conhecido, de modo que a renderização seja a mesma nos navegadores que anteriormente desenhavam a linha através dos glifos:
a {
text-decoration-line: underline;
text-decoration-skip-ink: auto; /* explicitly opt in to skipping */
}Suporte a navegadores
text-decoration-skip-ink é suportada em todos os navegadores modernos (Chrome, Edge, Firefox e Safari). Como a propriedade simplesmente se degrada para um sublinhado normal quando não há suporte, nenhum fallback é necessário — navegadores mais antigos simplesmente desenham a linha diretamente pelos glifos, o que ainda é perfeitamente legível.