TEXT PROPERTIES
NCD Style Sheet Guide v6.0
!!!
Netscape 4 can't display Vertical Alignment and Floating images correctly.
So some images will appear in unexpected places. !!!
Line Height
the distance between two adjacent line's baselines.
{line-height: # }
#=normal
<div style="line-height:normal">
Today is fine.<br>
Tomorrow will be fine.<br>
And next day....
</div>
|
Today is fine.
Tomorrow will be fine.
And next day....
|
#=length (px, pt, in, cm)
<div style="line-height:24pt">
Today is fine.<br>
Tomorrow will be fine.<br>
And next day....
</div>
|
Today is fine.
Tomorrow will be fine.
And next day....
|
#=number
<div style="line-height:2;
font-size:12pt">
Today is fine.<br>
Tomorrow will be fine.<br>
<font style="font-size:6pt">
And next day....
</font>
</div>
|
Today is fine.
Tomorrow will be fine.
And next day....
|
#=%
<div style="line-height:200%"
font-size:12pt">
Today is fine.<br>
Tomorrow will be fine.<br>
<font style="font-size:6pt">
And next day....
</font>
</div>
|
Today is fine.
Tomorrow will be fine.
And next day....
|
Text Alignment
Text Alignment {text-align: #}
#=left, center, right
#=justify
<p style="text-align:#">
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
</p>
#=left
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=center
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=right
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=justify
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
Justification Style {text-justify: #}
#=newspaper, distribute, distribute-all-lines,
inter-word, inter-ideograph, inter-cluster, auto
#=kashida
<p style="text-align:justify; text-justify:#">
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
</p>
#=newspaper
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=distribute
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=distribute-all-lines
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=inter-word
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=inter-ideograph
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=inter-cluster
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=auto
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=kashida
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
Kashida Space
{text-kashida-space: #}
#=%
This property is intended for Arabic language, and can be used with Justification Style.
(
Arabic justification sample)
Text Auto Space
{text-autospace: #}
#=none, ideograph-alpha, ideograph-numeric,
ideograph-parenthesis, ideograph-space
This property is intended for Asian language, and can be used with Justification Style.
(
Japanese sample)
Vertical Alignment
{vertical-align: #}
#=baseline, top, middle, bottom, text-top, text-bottom
Netscape 4 support this properties, but it can't display correctly
when two or more of this properties appear in the same page.
<img src="heno01.gif" style="vertical-align:#">
Today is FINE.<img src="heno02.gif">
#=baseline
|
Today is FINE.
|
#=top
|
Today is FINE.
|
#=middle
|
Today is FINE.
|
#=bottom
|
Today is FINE.
|
#=text-top
|
Today is FINE.
|
#=text-bottom
|
Today is FINE.
|
Subscript and Superscript
{vertical-align: #} #=sub, super
Today is
<FONT STYLE="vertical-align:sub">
FINE.</FONT>
|
Today is
FINE.
|
Today is
<FONT STYLE="vertical-align:super">
FINE.</FONT>
|
Today is
FINE.
|
Floating
{float: # } #=left, right, none
<IMG SRC="heno01.gif"
STYLE="float:left">
Today is FINE. <BR>
Tommorow will be fine.
|
Today is FINE.
Tommorow will be fine.
|
<IMG SRC="heno01.gif"
STYLE="float:right">
Today is FINE. <BR>
Tommorow will be fine.
|
Today is FINE.
Tommorow will be fine.
|
{clear: # } #=left, right, both, none
<IMG SRC="heno01.gif"
STYLE="float:left">
Today is FINE.
<BR STYLE="clear:left">
Tommorow will be fine.
|
Today is FINE.
Tommorow will be fine.
|
Indent
{text-indent: # }
#=length (px, pt, in, cm, em), %
<div style="text-indent:30pt">
Today is fine. Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
</div>
Today is fine.
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
Breaking
White Space {white-space: # }
#=normal, nowrap
#=pre
#=nowrap
|
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=pre
|
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
Internet Explorer 6 support #=pre on the standards-compliant mode switched by !DOCTYPE (Sample).
Word Breaking {word-break: # }
#=normal, break-all, keep-all
"keep-all" is for Asian language.
(
Sample in Japanese).
#=normal
|
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
#=break-all
|
This is a first paragraph. This is a great story, isn't it?
It is exciting, gorgeous, thrilling, fantastic, and romantic!
|
Word Wrap {word-wrap: # }
#=normal, break-word
#=normal
|
LongwordLongwordLongwordLongwordLongwordLongwordLongword
|
#=break-word
|
LongwordLongwordLongwordLongwordLongwordLongwordLongword
|
Line Breaking {line-break: # }
#=normal, strict
This property sets rules for Japanese line breaking
(
Sample in Japanese).
Layout Grid
Grid Type {layout-grid-type: # }
#=loose, strict, fixed
Grid Mode {layout-grid-mode: # }
#=none, line, char, both
Grid Line {layout-grid-line: # }
#=none, auto, length (px, pt, in, cm, em), %
Grid Character {layout-grid-char: # }
#=none, auto, length (px, pt, in, cm, em), %
Layout Grid is optimized for Asian Language
(Sample in Japanese).
<DIV STYLE="font-size:12pt;
layout-grid-type:#;
layout-grid-mode:both;
layout-grid-char:20pt; layout-grid-line:16pt;">
Today is fine. Tomorrow will be fine.
</DIV>
layout-grid-type: loose
|
Today is fine. Tomorrow will be fine.
|
layout-grid-type: strict
|
Today is fine. Tomorrow will be fine.
|
layout-grid-type: fixed
|
Today is fine. Tomorrow will be fine.
|
Grid Grouping
{layout-grid:
#type #mode #line #char #char-spacing }
Text Direction
{direction: # }
#=ltr, rtl
<P STYLE="direction:#">Today is fine.</P>
direction: ltr
|
Today is fine.
|
direction: rtl
|
Today is fine.
|
Override Unicode Bidirectional Algorithm
{unicode-bidi: # }
#=normal, embed, bidi-override
<SPAN STYLE="direction:rtl; unicode-bidi:#">Today is fine.</SPAN>
direction: normal
|
Today is fine.
|
direction: embed
|
Today is fine.
|
direction: bidi-override
|
Today is fine.
|
Text Flow Direction
{writing-mode: # }
#=lr-tb, tb-rl
<P STYLE="writing-mode:#">Today is fine. Tomorrow will be fine.</P>
writing-mode: lr-tb
|
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
|
writing-mode: tb-rl
This property is optimized for Asian Language
|
Long before the advent of TV weather forecasters,
people used tabletop glasses like a spherical flask
to predict upcoming changes in weather.
|
Text Input Mode
{ime-mode: # }
#=auto, active, inactive, deactivated
Set the default state of an input method editor (IME) for Japanese, Korean and Chinese system.
<form action=/cgi-bin/post-query method=POST>
Your Name in Japanese, Korean, or Chinese characters :
<input type=text name=name1 style="ime-mode:active"><br>
Your Name in Latin alphabet:
<input type=text name=name2 style="ime-mode:inactive"><br>
Tel Number:
<input type=text name=tel style="ime-mode:deactivated"><br>
<input type=reset>
</form>
Ruby
{ruby-align: # }
#=auto, left, center, right,
distribute-letter, distribute-space, line-edge
<ruby style="ruby-align:#">
<rb><img src="japanese.gif"></rb>
<rt>Network Communication Design</rt>
</ruby>
ruby-align: auto
|
|
ruby-align: left
|
|
ruby-align: right
|
|
ruby-align: distribute-letter
|
|
ruby-align: distribute-space
|
|
ruby-align: line-edge
|
|
{ruby-position: # }
#=above, inline
<ruby style="ruby-position:#">
<rb><img src="japanese.gif"></rb>
<rt>Network Communication Design</rt>
</ruby>
ruby-position: above
|
|
ruby-position: inline
|
|
Style Sheet Guide
|
HTML Design Guide
Basic |
Selector |
Cascading
Font |
Text |
List |
Color & Background |
Box |
Table |
Position & Format |
Other|
Selector List |
Property List

Network Communication Design -
http://www.ncdesign.org/
Copyright & Publishing 1994-2002
Network Communication Design
msg@ncdesign.org