Text-Justify, Volume, and Other Style Sheet Properties - Vertical-align
(Page 3 of 6 )
vertical-align
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
Value
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
[window.]document.getElementById("elementID").style.verticalAlign
visibility
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
Value
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
[window.]document.getElementById("elementID").style.visibility
voice-family
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 [, ...]]
Value
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 >>
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.
|
|
