Home arrow DHTML arrow Page 4 - 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 - Volume
(Page 4 of 6 )


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

Inherited: No

For aural style sheets, this sets the dynamic range (softness/loudness) of the spoken element. Because normal speech has inflections that prevent an absolute volume to apply at all times, the volume property sets the median volume.

CSS Syntax

volume: number | percentage | volumeConstant


A volume number  value is any number. A value of zero should represent the minimum audible level for the equipment and ambient noise environment; a value of 100 should represent the maximum comfortable level under the same conditions. A percentage  value is calculated relative to the parent elementís volume property setting. Alternative settings include the following constants (and their representative values): silent (no sound) | x-soft (0) | soft (25) | medium (50) | loud (75) | x-loud (100).


Initial Value         medium

Applies To            All elements.

IE 5(Mac)/5.5(Win) NN 4 Moz all Saf all Op all CSS 1

Inherited: Yes

Sets how the browser should render whitespace (extra character spaces and carriage returns) that is part of the elementís source code. Under normal circumstances, HTML ignores extra whitespace and thus collapses the rendered content around such space. For example, only single spaces are preserved between words, and br elements are required to force a line break within a paragraph. A whitespace property setting of pre treats whitespace as if you had surrounded the element in a pre element. Although browsers have a tradition of rendering pre elements in a monospace font, the look of an ordinary element set to white-space: pre preserves its font characteristics.

CSS Syntax

white-space: whiteSpaceType


One of five constants: normal | nowrap | pre | pre-line | pre-wrap (the last two are extensions to the pre value, new to CSS2.1) A value of normal allows regular HTML treatment of whitespace to rule. A value of nowrap (not available in Navigator 4) tells the browser to ignore line breaks in the source text (in case the author breaks up lines for readability in the editor) and break them on the page only where there are explicit HTML line breaks (with a br element, for example). A value of pre has the browser honor all whitespace entered by the author in the source content, without adjusting any font settings of the element.

Initial Value



div.example {white-space: pre}

Applies To

All elements.

IE 5(Mac) NN 6 Moz n/a Saf n/a Op 7 CSS 2

Inherited: Yes

Sets the minimum number of lines of a paragraph that must be visible at the top of a page after a page break occurs. See the orphans property for lines to be displayed at the bottom of a page before a page break.

CSS Syntax

widows: lineCount

Value                   An integer of the number of lines.

Initial Value        2

Applies To           Block-level elements.

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

Inherited: No

Sets the width of a block-level, replaced, and positioned elementís content width (exclusive of borders, padding, and margins).

IE for Windows counts left and right margins, padding, and borders when calculating the width of an element until you reach IE 6 in standards compatibility mode (see the DOCTYPE element in Chapter 1). When observing the CSS standards, the width applies to only the content portion of an element, irrespective of borders, padding, or margins.

CSS Syntax

width: length | percentage | auto


See the discussion about length values at the beginning of this chapter. The setting of auto lets the browser determine the width of the element box based on the amount of space required to display the content within the current window width.

Initial Value       auto


div#announce {position: relative; left: 30; width: 240}
textarea {width: 80%}

Applies To

Navigator 4, all absolute-positioned elements; Internet Explorer 4, applet, div, embed, fieldset, hr, iframe, img, input , marquee , object , span , table , and textarea elements; Internet Explorer 5, Mozilla, Safari, and Opera, all elements except nonreplaced inline elements, table column elements, and column group 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