¿Cómo controlar el espaciado de palabras en texto justificado con CSS?
9
Tengo 2 bloques de texto que son bastante pequeños (justo debajo de un párrafo cada uno) y realmente se ven mejor justificados, pero el problema es que a text-align: justify;veces agrega espacios realmente grandes y hace que el texto sea algo feo (el efecto contrario, obviamente).
¿Es posible ajustar más finamente el espaciado de palabras con CSS para que esto no suceda?
Esta propiedad solo para IE ofrece un refinamiento en el valor de "justificación" utilizado en la text-alignpropiedad. De hecho, el valor de "justificación" debe establecerse para que esa propiedad text-justifytenga algún efecto.
text-justify ofrece un excelente nivel de control de justificación sobre el contenido adjunto, lo que permite una variedad de sofisticados modelos de justificación utilizados en diferentes sistemas de escritura de idiomas.
Ejemplo
<p style="text-align: justify; text-justify: newspaper;">
This is “Newspaper” justified content
</p>
Valores posibles
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.
La referencia de IE dice "es la forma más sofisticada de justificación para los alfabetos latinos".
Además de usar text-justify, que actualmente parece ser solo compatible con IE, considere agregar guiones, con sugerencias explícitas de guiones ­y / o guiones automáticos basados en navegador, usando hyphens: autocon los prefijos de navegador debidos o usando guiones basados en JavaScript como Hyphenator.js. La separación de palabras a menudo reduce en gran medida la necesidad de espacio adicional en la justificación.
@AbdiasSoftware, la página es falsa: otra prueba de que w3schools es una basura, vea w3fools.com (La página de w3schools contiene botones "PlayIt", que puede usar para ver rápidamente que su información está mal).
@AbdiasSoftware, la otra fuente es sobre otra propiedad. El sitio reference.sitepoint.com no menciona text-justifyen absoluto. Pero lamento haberlo escrito inicialmente en text-align-justifylugar de text-justify(arreglado ahora). La configuración, text-align: justifypor supuesto, está implícita aquí; La cuestión es si el tipo de justificación puede controlarse.
Jukka K. Korpela
Hm, bien interesante. Haré un poco más de investigación. Gracias. Son las 4 am aquí, mi juicio está apagado :-)
Además de usar
text-justify
, que actualmente parece ser solo compatible con IE, considere agregar guiones, con sugerencias explícitas de guiones­
y / o guiones automáticos basados en navegador, usandohyphens: auto
con los prefijos de navegador debidos o usando guiones basados en JavaScript como Hyphenator.js. La separación de palabras a menudo reduce en gran medida la necesidad de espacio adicional en la justificación.fuente
The text-justify property is supported in all of the major browsers.
, fuente: w3schools.com/cssref/css3_pr_text-justify.asp y Text-Align, w3schools.com/cssref/pr_text_text-align.asptext-justify
en absoluto. Pero lamento haberlo escrito inicialmente entext-align-justify
lugar detext-justify
(arreglado ahora). La configuración,text-align: justify
por supuesto, está implícita aquí; La cuestión es si el tipo de justificación puede controlarse.