O hanging-punctuationobjetivo da propriedade é fornecer aos web designers um controle mais refinado sobre a tipografia na web.
A ideia por trás da pontuação deslocada é colocar alguns caracteres de pontuação desde o início (ou em menor extensão no final) dos elementos de texto “fora” da caixa para preservar o fluxo de leitura.
Basicamente, ele moveria levemente essa citação, marcador ou qualquer outra coisa para a esquerda (ou para a direita no rtlmodo) para que a primeira letra fosse alinhada corretamente com o resto do documento.
Observe que essa propriedade é opcional, portanto, os fabricantes de navegador podem ou não suportá-la.
Sintaxe
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Nenhum personagem trava. Este é o valor padrão desta propriedade.
first
Um caractere disponível no início da primeira linha formatada de um elemento trava.
last
Um caractere disponível no final da última linha formatada de um elemento trava.
force-end
Uma parada ou vírgula no final de uma linha trava.
A pontuação é forçada a travar e não é considerada ao medir a linha de justificativa.
allow-end
Uma parada ou vírgula no final de uma linha trava se não couber antes da justificativa.
A pontuação no final da primeira linha para não desliga porque cabe sem deslizar. Na segunda linha, no entanto, não há espaço suficiente, então ele trava.
Personagens disponíveis
| Código | Personagem | Nome |
|---|---|---|
U+002C | , | VÍRGULA |
U+002E | . | PONTO FINAL |
U+060C | ، | ARABIC COMMA |
U+06D4 | ۔ | ARABIC FULL STOP |
U+3001 | 、 | Vírgula IDEOGRÁFICA |
U+3002 | 。 | PARADA COMPLETA IDEOGRÁFICA |
U+FF0C | ， | FULLWIDTH COMMA |
U+FF0E | ． | FULLWIDTH FULL STOP |
U+FE50 | ﹐ | SMALL COMMA |
U+FE51 | ﹑ | PEQUENA Vírgula IDEOGRÁFICA |
U+FE52 | ﹒ | PEQUENA PARADA COMPLETA |
U+FF61 | ｡ | MEIA-LARGURA IDEOGRÁFICA FULL STOP |
U+FF64 | ､ | MEIA LARGURA IDEOGRAFICA Vírgula |
Observe que os agentes de usuário têm permissão para adicionar qualquer caractere a esta lista. Citando a especificação:
O UA pode incluir outros caracteres, conforme apropriado.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| Não | Não | Não | Não | 10 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Não | Não | Não | 10,0-10,2 |
Uma alternativa decente para o navegador não compatível seria usar um recuo de texto negativo da seguinte forma:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Para listas de marcadores, você pode querer ter certeza de que a posição dos marcadores está definida como outsidee que o estouro do contêiner não está definido como hidden.