---

TEXT PROPERTIES

{line-height: # }

#=normal

<div style="line-height:normal">
Today is fine.<br>
Tomorrow will be fine.<br>
And next day.... 
</div>

#=length (px, pt, in, cm)

<div style="line-height:24pt">
Today is fine.<br>
Tomorrow will be fine.<br>
And next day.... 
</div>

#=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>

#=%

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

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>

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>

Kashida Space
{text-kashida-space: #}     #=%

Text Auto Space
{text-autospace: #}
#=none, ideograph-alpha, ideograph-numeric,
    ideograph-parenthesis, ideograph-space

{vertical-align: #}
#=baseline, top, middle, bottom, text-top, text-bottom

<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
<FONT STYLE="vertical-align:super">
FINE.</FONT>

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

White Space {white-space: # }
#=normal, nowrap
#=pre

Internet Explorer 6 support #=pre on the standards-compliant mode switched by !DOCTYPE (Sample).

Word Breaking {word-break: # }
#=normal, break-all, keep-all

Word Wrap {word-wrap: # }
#=normal, break-word

Line Breaking {line-break: # }
#=normal, strict

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>

Grid Grouping
{layout-grid:
    #type #mode #line #char #char-spacing }

{direction: # }     #=ltr, rtl

<P STYLE="direction:#">Today is fine.</P>

Override Unicode Bidirectional Algorithm
{unicode-bidi: # }
    #=normal, embed, bidi-override

<SPAN STYLE="direction:rtl; unicode-bidi:#">Today is fine.</SPAN>

Text Flow Direction
{writing-mode: # }     #=lr-tb, tb-rl

<P STYLE="writing-mode:#">Today is fine. Tomorrow will be fine.</P>

{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-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	Network Communication Design
ruby-align: left	Network Communication Design
ruby-align: right	Network Communication Design
ruby-align: distribute-letter	Network Communication Design
ruby-align: distribute-space	Network Communication Design
ruby-align: line-edge	Network Communication Design

{ruby-position: # }
#=above, inline

<ruby style="ruby-position:#">
   <rb><img src="japanese.gif"></rb>
   <rt>Network Communication Design</rt>
</ruby>

ruby-position: above	Network Communication Design
ruby-position: inline	Network Communication Design

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 - /
Copyright & Publishing 1994-2008 Network Communication Design