Home arrow DHTML arrow Page 2 - Ruby-Position, Size, and Other Style Sheet Properties

Ruby-Position, Size, and Other Style Sheet Properties

In this ninth part of an ongoing series on style sheet properties, you'll learn about size, scrollbars, 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 / 6
October 25, 2007
  1. · Ruby-Position, Size, and Other Style Sheet Properties
  2. · Size
  3. · Speech-rate
  4. · Text-autospace

print this article

Ruby-Position, Size, and Other Style Sheet Properties - Size
(Page 2 of 4 )


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

Inherited: n/a

Sets the size and/or orientation of a page box. Intended primarily for printed page formatting, the settings may not affect how content is cropped or oriented on the video screen. This property is set within an @page declaration.

CSS Syntax

size: [length {1,2}] auto | portrait | landscape


If you specify one or two length  values, the page box becomes absolute regardless of the paper sheet size; without specific length  values, the page box is sized relative to the selected paper sheet size. If you supply only one length value, it is applied to both the width and height of the page box; if there are two values, the first controls the page box width and the second controls the page box height. Bear in mind that printers frequently impose a minimum margin around the rendered page box. Even when the size property is set to auto, you can add more breathing space around the page box by adding a margin property to the @page declaration.

Initial Value         auto


Example               @page{size: landscape}

Applies To            Page context.

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

Inherited: Yes

For aural style sheets, this specifies whether a browser equipped for text-to-speech should speak the element’s content, and if so, whether the speech should be as words or spelled out character-by-character.

CSS Syntax

speak: speechType


Three possible constant values: none | normal | spell-out. A value of none means that speech is turned off. The browser does not delay over the duration of the speech and any specified pauses (see the volume: silent property value). A value of normal turns on speech and reads the text as words. A value of spell-out turns on speech and reads the content letter-by-letter (certainly applicable to abbr and acronym elements).

Initial Value         normal

Applies To            All elements.

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

Inherited: Yes

For text-to-speech-capable browsers, this specifies whether the browser calls out the name of a table cell’s header prior to the cell’s value every time that value is read aloud or just one time for all adjacently read cells that share the same header (e.g., navigating downward through a table column).

CSS Syntax

speak-header: headerFrequency

Value                Two possible constant values: once | always.

Initial Value      onc e

Applies To    th elements .

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

Inherited: Yes

For aural style sheets, this sets whether numbers are to be read as individual numerals (“one four two”) or as full numbers (e.g., “One hundred forty-two”). The language used for the spoken numbers is set with the element’s lang property.

CSS Syntax

speak-numeral: numeralType

Value                   Two possible constant values: digits | continuous.

Initial Value         continuous

Applies To            All elements.

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

Inherited: Yes

For aural style sheets, this sets whether punctuation symbols should be read aloud (“period”) or interpreted as the language’s natural pauses for the various symbols.

CSS Syntax

speak-punctuation: punctuationType


Two possible constant values: code | none. A value of code means that a symbol name is spoken when the symbol is encountered in element text.

Initial Value           none

Applies To               All elements.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials