Text-Justify, Volume, and Other Style Sheet Properties
(Page 1 of 6 )
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.
Alphabetical Style Sheet Properties: Text-justify
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
Value
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 |
Value | Meaning |
distribute-center-last | Justifies lines but centers the last line (not implemented) |
inter-cluster | Justifies lines lacking word spacing |
inter-ideograph | Justifies lines consisting of ideographs |
inter-word | Justifies lines by distributing padded space between words (common for Latin languages) |
kashida | Justifies Arabic script through elongated strokes (IE 5.5 or later required) |
newspaper | 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
[window.]document.getElementById("elementID").style.textJustify
text-kashida-space
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
Value
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%
Example
div#col1 {text-align: justify; text-justify: newspaper; text-kashida-space: 5%}
Applies To Block-level elements.
Object Model Reference
[window.]document.getElementById("elementID").style.textKashidaSpace
text-overflow
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
[window.]document.getElementById("elementID").style.textOverflow
text-shadow
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
Value
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.
Next: Text-transform >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
