Home arrow DHTML arrow Page 2 - 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 - Text-transform
(Page 2 of 6 )


IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Controls the capitalization of the element’s text. When a value other than none is assigned to this property, the cases of all letters in the source text are arranged by the style sheet, overriding the case of the source text characters.

CSS Syntax

text-transform: caseType | none


A value of none allows the case of the source text to be rendered as-is. Other available constant values are capitalize | lowercase | uppercase. A value of capitalize sets the first character of every word to uppercase. The values lowercase and uppercase render all characters of the element text in their respective cases.

Initial Value       non e

Example          h2 {text-transform: capitalize}

Applies To                   All elements .

Object Model Reference


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

Inherited: No

Controls whether an underline (i.e., an element with a text-decoration style set to underline ) is rendered above or below the text. Applicable primarily to Asian languages rendered in vertical columns.

CSS Syntax

text-underline-position: positionType | none


IE 5.5 recognizes two constant values: above | below. IE 6 adds the values auto and auto-pos (which appear to do the same thing). The default value also changed between versions, from below to auto. In IE 6, the auto value underlines vertical Japanese text “above” (to the right) of the characters.

Initial Value         none

Example       h2 {text-underline-position: above}

Applies To            All elements.

Object Model Reference


IE 4 NN 4 Moz all Saf all Op all CSS 2

Inherited: No

For positioned elements, this defines the position of the top margin edge of an element relative to the top edge of the next outermost block content container.

CSS Syntax

top: length | percentage | auto


See the discussion about length values at the beginning of this chapter. Negative lengths may be allowed in some contexts, but be sure to test the results on all browsers. You may also specify a percentage value, which is calculated based on the height of the next outermost container. The setting of auto lets the browser determine the top offset of the element box on its naturally flowing offset within the containing box.

Initial Value         auto


h1 {position: relative; top:2em}
#logo {position: absolute; left:80px; top:30px}

Applies To            Positioned elements.

Object Model Reference


IE 5 NN n/a Moz all Saf all Op 8 CSS 2

Inherited: No

Controls the embedding of bidirectional text (such as a mixture of German and Arabic), in concert with the direction style property.

CSS Syntax

unicode-bidi: embeddingType

Value                  One of the following constant values: bidi-override | embed | normal.

Initial Value         normal

Example        div.multiLingual {unicode-bidi: embed}

Applies To              All elements.

Object Model Reference


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