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

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 / 13
November 01, 2007
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

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

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.


blog comments powered by Disqus
DHTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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