Como controlar o espaçamento de palavras em texto justificado com CSS?
9
Eu tenho 2 blocos de texto que são muito pequenos (pouco menos de um parágrafo cada) e eles realmente parecem mais justificados, mas o problema é que text-align: justify;às vezes adiciona espaços realmente grandes e torna o texto um pouco feio (o efeito oposto, obviamente).
É possível ajustar com mais precisão o espaçamento da palavra com CSS para que isso não aconteça?
Essa propriedade somente para o IE oferece um refinamento no valor "justificar" usado na text-alignpropriedade. De fato, o valor "justificar" deve ser definido para que essa propriedade text-justifytenha algum efeito.
text-justify oferece um bom nível de controle de justificativa sobre o conteúdo incluído, permitindo uma variedade de modelos sofisticados de justificativa usados em diferentes sistemas de escrita de idiomas.
Exemplo
<p style="text-align: justify; text-justify: newspaper;">
This is “Newspaper” justified content
</p>
Valores possíveis
VALUE DESCRIPTION
-------------------------------------------------------------------------------------------
auto The browser will determine the appropriate justification algorithm
to use
distribute Justification is handled similarly to the “newspaper” value,
but this version is optimized for East Asian content
(especially the Thai language.)
In this justification method, the last line is not justified.
distribute-all-lines Behavior and intent for this value is the same as with the
“distribute” value, but the last line is also justified.
inter-cluster Justifies content that does not have any inter-word spacing
(such as with many East Asian languages.)
inter-ideograph Used for justifying blocks of ideographic content.
Justification is achieved by increasing or decreasing spacing
between ideographic characters and words as well.
inter-word Justification is achieved by increasing the spacing between words.
It is the quickest method of justification and does not justify
the last line of a content block.
newspaper Spacing between letters and words are increased or decreased
as necessary.
A referência do IE diz que "é a forma mais sofisticada de justificação para os alfabetos latinos".
Além de usar text-justify, que parece ser atualmente suportado apenas pelo IE, considere adicionar hifenização, com dicas explícitas de hifenização ­e / ou hifenização automática baseada em navegador, usar hyphens: autocom os prefixos de navegador adequados ou usar hifenizador baseado em JavaScript como Hyphenator.js. A hifenização geralmente reduz bastante a necessidade de espaçamento adicional na justificação.
@AbdiasSoftware, a página é falsa - mais uma prova de que o w3schools é uma porcaria, consulte w3fools.com (a página w3schools contém botões "PlayIt", que você pode usar para ver rapidamente que suas informações estão erradas.)
Jukka K. Korpela
Eles são um pouco desatualizado às vezes, mas eu não os chamaria de falsa :-) Aqui é de qualquer maneira uma outra fonte: reference.sitepoint.com/css/text-align
@AbdiasSoftware, a outra fonte é sobre outra propriedade. O site reference.sitepoint.com não menciona text-justifynada. Mas lamento ter inicialmente escrito sobre, em text-align-justifyvez de text-justify(corrigido agora). A configuração text-align: justifyé obviamente implícita aqui; a questão é se o tipo de justificação pode ser controlado.
Jukka K. Korpela
Bem, bem interessante. Vou fazer mais algumas pesquisas. Obrigado. É de quatro horas aqui, o meu juízo é off :-)
Além de usar
text-justify
, que parece ser atualmente suportado apenas pelo IE, considere adicionar hifenização, com dicas explícitas de hifenização­
e / ou hifenização automática baseada em navegador, usarhyphens: auto
com os prefixos de navegador adequados ou usar hifenizador baseado em JavaScript como Hyphenator.js. A hifenização geralmente reduz bastante a necessidade de espaçamento adicional na justificação.fonte
The text-justify property is supported in all of the major browsers.
, Fonte: w3schools.com/cssref/css3_pr_text-justify.asp e text-align, w3schools.com/cssref/pr_text_text-align.asptext-justify
nada. Mas lamento ter inicialmente escrito sobre, emtext-align-justify
vez detext-justify
(corrigido agora). A configuraçãotext-align: justify
é obviamente implícita aqui; a questão é se o tipo de justificação pode ser controlado.