Home arrow DHTML arrow Page 5 - Padding, Pages, and More Style Sheet Properties
DHTML

Padding, Pages, and More Style Sheet Properties


Continuing our series of articles on style sheet properties, this eighth part covers pages, pitch-range, and more. It 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: 4 stars4 stars4 stars4 stars4 stars / 14
October 18, 2007
TABLE OF CONTENTS:
  1. · Padding, Pages, and More Style Sheet Properties
  2. · Page
  3. · Page-break-inside
  4. · Pitch-range
  5. · Quotes

print this article
SEARCH DEVARTICLES

Padding, Pages, and More Style Sheet Properties - Quotes
(Page 5 of 5 )

 

quotes
IE 5(Mac) NN n/a Moz all Saf n/a Op all CSS 2

Inherited: Yes

Controls the characters to be generated for open and close quote symbols in text. The assumption is that the quote symbols are not part of the content, but are generated by the browser because of contextual clues (such as surrounding a quote with a q element). This property must be used with the content property, which, with the help of the :before and :after pseudo-classes, determines where the open-quote and end-quote symbols appear:

  q {quotes: "«" "»" "'" "'"}
  q:before {content: open-quote}
  q:after {content: close-quote}

CSS Syntax

quotes: openString closeString [nestedOpenString nestedCloseString] | none

Value

One or two pairs of quoted symbols. The optional second pair defines the symbols used for a nested quote symbol. Entity characters are not permitted.

Initial Value         Depends on browser and system language. 

Applies To            All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.quotes

Notes

Support in browsers isn’t as good as indicated above. IE 5 for the Macintosh doesn’t genuinely respond to the quotes property, but does substitute standard two-level quotes for the content property. Mozilla implements only the first level of quotes. Symbol characters outside the ASCII set may not align with the characters you put into the source code with your text editor. Verify the results before deploying this property.

richness
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 the brightness (stridency) of the voice used in text-to-speech rendering of the element.

CSS Syntax

richness: number

Value

A positive floating-point number to represent how strident the voice sounds. A value of 50 is normal. Lower values produce a softer, mellower voice; higher values produce a louder, more forceful voice.

Initial Value         50

Applies To            All elements.

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

Inherited: No

For positionable elements, this defines the position of the right margin edge of an element box relative to the right edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the right edge of the inline location of where the element would normally appear in the content.

CSS Syntax

right: length | percentage | auto

Value

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 width of the next outermost container. Note, however, that the results you get may seem like the inverse of what you expect: a value of 0% means that the right edge is flush against the right edge of the positioning context, whereas a value of 100% could push the element completely out of view to the left. The setting of auto lets the browser determine the right offset of the element box on its naturally flowing offset within the containing box.

Initial Value         auto

Applies To            Positioned elements.

Object Model Reference

[window.]document.getElementById("elementID").style.right

ruby-align
IE 5
NN n/a Moz n/a Saf n/a Op n/a CSS 3

Inherited: No

Controls alignment of content in a ruby element.

CSS Syntax

ruby-align: alignType | auto

Value

One of the following constants: auto | center | distribute-letter | distribute-space | left | line-edge | right . For more details on ruby-related styles, visit http://www.w3.org/TR/ css3-ruby.

Initial Value        auto

Applies To

IE limits this style to ruby elements only, but the preliminary CSS3 specification suggests it can apply to any element that contains ruby text (and is thus inheritable in that context).

Object Model Reference

[window.]document.getElementById("elementID").style.rubyAlign

ruby-overhang
IE 5 NN n/a Moz n/a Saf n/a Op n/a CSS 3

Inherited: Yes

Controls text overhang characteristics of content in a ruby element.

CSS Syntax

ruby-overhang: alignType | auto

Value

One of the following constants: auto | none | whitespace. For more details on ruby-related styles, visit http://www.w3.org/TR/css3-ruby.

Initial Value         auto

Applies To

ruby elements (or any element that has its display property set to ruby-text).

Object Model Reference

[window.]document.getElementById("elementID").style.rubyOverhang

Please check back next week for the continuation of this article.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
DHTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials