AtoZ CSS Screencast: Justify Text

Justify is one available value for the text-align property.

It allows the formatting of text in a style often used in newspaper design.

In this episode, we’ll look at the 12 possible values for text-align, one of which is justify, next we’ll look at using justified text with CSS columns and finally look at how justify can be used to create a floatless responsive grid system with just a few lines of code.

Text Align

The text-align property performs a very familiar action of aligning text. Anyone who has read words on a page or used a word processor will be familiar with the idea of left, center or right aligned text.

These are the 3 most common values used with text-align but there are others too.

• left
• right
• center
• justify
• start
• end
• start end
• match-parent
• <string>
• start <string>
• <string> end
• inherit

The start and end keywords are similar to left and right but take the direction of text into account. If the language is left-to-right, start and left are equivalent. If the text direction is rtl then start and right are equivalent.

The match-parent value is similar to inherit but the start and end are calculated according to the parent’s direction. This value has poor browser support but does work in Chrome.

The <string> values allow alignment to be determined by an arbitrary string of text. This value is currently not supported in any browser, so I wasn’t able to test it. The example on MDN sounds quite useful though to align decimal values on the “.” full-stop string.

Continue reading %AtoZ CSS Screencast: Justify Text%

by Guy Routledge via SitePoint