Home arrow DHTML arrow Page 3 - 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 - Vertical-align
(Page 3 of 6 )


IE 4 NN n/a Moz all Saf 1.2 Op all CSS 1

Inherited: No

There are two sets of values for this property, and they affect different characteristics of the inline element to which they are applied. The major point of reference is that an inline element has its own line box to hold its content. Two values, top and bottom , affect how the text is rendered within the line box. The settings bring the text flush with the top or bottom of the box, respectively.

Application of this property is not limited to inline spans of text. Images and tables can use this style property. All other settings for vertical-align affect how the entire element box is vertically positioned relative to text content of the parent element. The default value, baseline , means that the line box is positioned such that the baselines of both the line boxís text (or very bottom of an element such as an img ) and the parent text are even. Thatís how an em element can be its own line box element but still look as though it flows on the same baseline as its containing p element. The rest of the propertyís constant values (and percentage or length) determine where the elementís line box is set with respect to the parent line. A positive percentage or length value positions the element the stated distance above the baseline; a negative value positions the element below the baseline. Percentages are calculated with respect to the line height.

CSS Syntax

vertical-align: vertAlignType | length | percentage 


Two constant values apply to alignment of text within the element itself: bottom | top.

Six constant values apply to alignment of the elementís line box relative to the surrounding text line (of the parent element): baseline | middle | sub | super | text-bottom | text-top . A value of baseline keeps the baseline of the element and parent element line even. A value of middle aligns the vertical midpoint of the element with the baseline plus one-half the x-height of the parent elementís font. Values of sub and super shift the element into position for subscript and superscript but do not by themselves create a true subscript or superscript in that no adjustment to the font size is made with this property. A value of text-bottom aligns the bottom of the element with the bottom of the font line of the parent element text; a value of text-top does the same with the tops of the element and parent.

Initial Value        baseline

Example           span.sup {vertical-align: super; font-size: smaller}

Applies To                   Inline elements only.

Object Model Reference


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

Inherited: Yes

Controls whether the element is rendered on the page. An element hidden via the visibility property preserves space in the document where the element normally appears. If you prefer surrounding content to cinch up the space left by a hidden element, see the display property. The CSS specification suggests that the value of collapse , when applied to table row-related elements, should cinch up the table, but no mainstream browser does that (Mozilla 1.8, Safari 2, and Opera 9 simply hide the row, leaving a blank row space).

The visibility property is inherited when its value is set to inherit . This setting means that if the parent is hidden, the child is also hidden. But, by setting the childís visibility property to visible , you can still keep the parent hidden while showing the child independently.

CSS Syntax

visibility: visibilityType


One of the constant values: collapse | hidden | inherit | visible. IE for Windows does not recognize the collapse value. Navigator 4 allows visibility control only of positioned elements.

Initial Value       visible

Example                     #congrats {visibility: hidden}

Applies To                   All elements.

Object Model Reference


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 voice family names the aural browser should try to use for speaking the content. Multiple, comma-delimited values are accepted. This feature is analogous to the font-family setting for visual browsers.

CSS Syntax

voice-family: voiceFamilyName [, voiceFamilyName [, ...]]


A voiceFamilyName  may be the identifier for a voice type provided by the aural browser or a generic voice name (yet to be determined by the W3C). As with font-family settings, you should specify multiple voice types, starting with the more specific and ending with the most generic for the type of speech you want for the elementís content.

Initial Value         Depends on browser.

Applies To            All elements.

Next: Volume >>

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