Home arrow DHTML arrow Text-Justify, Volume, and Other Style Sheet Properties

Text-Justify, Volume, and Other Style Sheet Properties

In this conclusion to a ten-part series on style sheet properties, you'll learn about things you can do with text, how to set the width of an element, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
November 01, 2007
  1. · Text-Justify, Volume, and Other Style Sheet Properties
  2. · Text-transform
  3. · Vertical-align
  4. · Volume
  5. · Word-break
  6. · Writing-mode

print this article

Text-Justify, Volume, and Other Style Sheet Properties
(Page 1 of 6 )

Alphabetical Style Sheet Properties: Text-justify 

IE 5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: Yes

Controls detailed character distribution techniques for any block-level element that has its text-align CSS property set to justify . This property is designed primarily for Asian or other non-Latin languages.

CSS Syntax

text-justify: justificationType


One of the constants shown in the following table.

Value Meaning
auto Lets browser choose best type
distribute Similar to newspaper but optimized for Asian languages
distribute-all-lines Justifies lines, including the last line, leading to potentially very wide word spacing







Justifies lines but centers the last line (not implemented)


Justifies lines lacking word spacing


Justifies lines consisting of ideographs


Justifies lines by distributing padded space between words (common for Latin languages)


Justifies Arabic script through elongated strokes (IE 5.5 or later required)


Justifies lines by distributing padded space between words and between characters

Initial Value      0

Example                   div#col1 {text-align: justify; text-justify: newspaper}

Applies To                Block-level elements .

Object Model Reference


IE 5.5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: Yes

For Arabic text in a block-level element with text alignment style set to justify , controls the ratio of kashida expansion to whitespace expansion.

CSS Syntax

text-kashida-space: length | percentage


See the discussion about length values at the beginning of this chapter. You may also specify a percentage value, which is calculated based on the width of the next outermost container.

Initial Value         0%


div#col1 {text-align: justify; text-justify: newspaper; text-kashida-space: 5%}

Applies To            Block-level elements.

Object Model Reference


IE 6 NN n/a Moz n/a Saf 1.3/2 Op (see text) CSS n/a

Inherited: No

Controls whether text content that overflows a fixed box space should display an ellipsis ( . . . ) at the end of the line to indicate more text is available. The element should also have its overflow style property set to hidden . Opera 9 implements a proprietary version of this property: -o-text-overflow .

CSS Syntax

text-overflow: overflowType

Value           One of two constants: clip | ellipsis.

Initial Value      clip

Example         td {overflow: hidden; white-space: nowrap; text-overflow: ellipsis} 

Applies To               Block-level elements.

Object Model Reference


IE n/a NN n/a Moz n/a Saf 1.2 Op n/a CSS <2.1

Inherited: No

Sets shadow effects for the text of the current element. A text element can have more than one shadow, and each shadow can have its own color, vertical offset, horizontal offset, and blur radius. Each shadow exists in its own minilayer, stacked with the first shadow specification at the bottom of the heap. Values for each shadow are space-delimited, and multiple shadow value sets are comma-delimited.

CSS Syntax

text-shadow: [color] horizLength vertLength blurRadiusLength,
    [[color] horizLength vertLength blurRadiusLength] | none


If you omit the color  property value, the shadow uses the elementís color property value (which may, itself, be inherited). The color property can be placed before or after whatever length values are set for a shadow. See the discussion of color values at the beginning of this chapter. Values for horizLength  and vertLength  are length values (see the beginning of this chapter), and their sign indicates the direction the shadow offset takes from the element text. For the horizLength  value, a positive value places the shadow to the right of the element; a negative value to the left. For the vertLength  value, a positive value places the shadow below the text; a negative value places it above. A blur radius is a length value (see the beginning of this chapter) that specifies the extent of the shadow from the edge of the text characters.

Initial Value          none

Applies To             All elements.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials