TEXT PROPERTIES

NCD Style Sheet Guide v6.0

Sponsor's ADs:
!!! 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>
Your Name in Japanese, Korean, or Chinese characters :
Your Name in Latin alphabet:
Tel Number:


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


BACK TO NCD HOME
Network Communication Design - /
Copyright & Publishing 1994-2008 Network Communication Design