Mobile app version of vmapp.org
Login or Join
Kristi927

: How to control word-spacing in justified text with CSS? I have 2 blocks of text that are pretty small (just under a paragraph each) and they really look better justified but the problem is

@Kristi927

Posted in: #Css #Typography #WebsiteDesign

I have 2 blocks of text that are pretty small (just under a paragraph each) and they really look better justified but the problem is that text-align: justify; sometimes adds really large spaces and makes the text somewhat ugly (the opposite effect, obviously).

Is it possible to more finely tune the word spacing with CSS so that this doesn't happen?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Kristi927

2 Comments

Sorted by latest first Latest Oldest Best

 

@Eichhorn212

In addition to using text-justify, which seems to be currently supported by IE only, consider adding hyphenation, with explicit hyphenation hints ­ and/or browser-based automatic hyphenation, using hyphens: auto with due browser prefixes or using JavaScript-based hyphenator like Hyphenator.js. Hyphenation often greatly reduces the need for added spacing in justification.

10% popularity Vote Up Vote Down


 

@Karen819

CSS TEXT-JUSTIFY

This IE-only property offers a refinement on the “justify” value used in the text-align property. Indeed, the “justify” value must be set for that property for text-justify to have any effect.

text-justify offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.

Example

<p style="text-align: justify; text-justify: newspaper;">
This is “Newspaper” justified content
</p>


Possible Values

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.


The IE reference says “it is the most sophisticated form of justification for Latin alphabets.”

Source: www.css3.com/css-text-justify/
Hope this helps!

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme