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

Alphabetical Style Sheet Property References: Ruby-position 

IE 5 NN n/a Moz n/a Saf n/a Op n/a CSS 3

Inherited: Yes

Controls whether nested ruby ( rt element) text renders on the same line or above its related ruby base ( rb element) text.

CSS Syntax

ruby-position: positionType


IE recognizes one of the following constants, above | inline, while the preliminary CSS3 specification prefers these constants: after | before | inline | right. For more details on ruby-related styles, visit http://www.w3.org/TR/css3-ruby.

Initial Value      above (IE); before (CSS3).

Applies To

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

Object Model Reference


scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color
IE 5.5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: No

Controls the colors for specific components of a scrollbar user interface element associated with scrollable elements. The following table describes which pieces of a scroll bar are controlled by each property.




Top and left edges of the scroll slider and arrow button boxes


Arrows inside arrow button boxes


Overall hue of the scroll bar 


Right and bottom edges of the scroll slider and arrow button boxes


Forward flat surfaces (e.g., front-facing panel of slider) and alternating pixels of the track


Normally white pixels that create 3D effects, plus alternating pixels of the track


Slighlty thicker edges controlled by scrollbar-darkshadow-color


Entire track, as solid version of specified color

You can experiment with combinations of multiple scroll bar pieces and colors.


CSS Syntax

scrollbar-3dlight-color: color
scrollbar-arrow-color: color
scrollbar-base-color: color
scrollbar-darkshadow-color: color
scrollbar-face-color: color
scrollbar-highlight-color: color
scrollbar-shadow-color: color

Value                 CSS color values.

Initial Value       Varies with user Display control panel settings.

Example             textarea {scrollbar-face-color: lightyellow}

Applies To          applet, bdo, body, custom, div, embed, object, and textarea elements.

Object Model Reference

[window.]document.getElementById("elementID").style.scrollbar3dLightColor [window.]document.getElementById("elementID").style.scrollbarArrowColor [window.]document.getElementById("elementID").style.scrollbarBaseColor [window.]document.getElementById("elementID").style.scrollbarDarkShadowColor [window.]document.getElementById("elementID").style.scrollbarFaceColor [window.]document.getElementById("elementID").style.scrollbarHighlightColor [window.]document.getElementById("elementID").style.scrollbarShadowColor [window.]document.getElementById("elementID").style.scrollbarTrackColor

Next: Size >>

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