TEXT PROPERTIES

NCD Style Sheet Guide v5.0

!!! Netscape 4 can't display Vertical Alignment and Floating images correctly.
So some images will appear in unexpected places. !!!

+ Text Decoration

{text-decoration: #}
#=none, underline, line-through

{text-decoration:none}
Today is fine.
{text-decoration:underline}
Today is fine.
{text-decoration:line-through}
Today is fine.

#=overline 

{text-decoration:overline}
Today is fine.

#=blink 

{text-decoration:blink}
Today is fine.


+ Text Transform

{text-transform: #}
#=none, capitalize, uppercase, lowercase

{text-transform:none}
Today is fine.
{text-transform:capitalize}
Today is fine.
{text-transform:uppercase}
Today is fine.
{text-transform:lowercase}
Today is fine.


+ Spacing

Letter Spacing {letter-spacing: # }
#=normal, length (px, pt, in, cm, em)

<div style="letter-spacing:0.5em">
Today is fine.
</div>
Today is fine.

Word Spacing {word-spacing: # }
#=normal, length (px, pt, in, cm, em)

Now available only on Macintosh. 
<div style="word-spacing:10">
Today is fine.
</div>
Today is fine.

+ 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 {text-justify: #}
#=inter-word, newspaper, distribute,
     distribute-all-line, inter-ideograph, auto 

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

#=inter-word

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!

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

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!

#=auto

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic!




+ Vertical Alignment

 Netscape 4 support this properties, but it can't display correctly
when two or more of this properties appear in the same page.

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

<IMG SRC="f.gif"
STYLE="vertical-align:text-top">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE. 
<IMG SRC="heno01.gif"
STYLE="vertical-align:text-bottom">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE. 
<IMG SRC="heno01.gif"
STYLE="vertical-align:baseline">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE. 
<IMG SRC="heno01.gif"
STYLE="vertical-align:middle">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE.

{vertical-align: #} #=top, bottom

<IMG SRC="heno01.gif"
STYLE="vertical-align:middle">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE. 
<IMG SRC="heno01.gif"
STYLE="vertical-align:middle">
Today is FINE.<IMG SRC="heno02.gif">
Today is FINE.

Subscript and Superscript
{vertical-align: #} #=sub, super

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

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

word-break:normal

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic! 

word-break:break-all

This is a first paragraph. This is a great story, isn't it? It is exciting, gorgeous, thrilling, fantastic, and romantic! 

word-break:keep-all
   This attribute is for Japanese, Korean, and Chinese.
   Sample in Japanese


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), %

Grid Character Spacing
{layout-grid-char-spacing: # }
#=auto, length (px, pt, in, cm, em), % 

<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
   Sample in Japanese
Today is fine. Tomorrow will be fine.

layout-grid-type: strict
   Sample in Japanese
Today is fine. Tomorrow will be fine.

layout-grid-type: fixed
   Sample in Japanese
Today is fine. Tomorrow will be fine.

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



+ Text Input Mode

{ime-mode: # }
#=auto, active, inactive, deactivated

Set the default input method 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:


+ Pronunciation

{ruby-align: # }
#=auto, left, center, right,
     distribute-letter, distribute-space, line-edge 

<RUBY STYLE="ruby-align:#">
   <img src="samp/jp001.gif">
   <RT>Network Communication Design
</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:#">
   <img src="samp/jp001.gif">
   <RT>Network Communication Design Network Communication Design
</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 | Box Positioning | Other|
Style Property LIST

BACK TO NCD HOME
Network Communication Design - http://www.ncdesign.org/
 Copyright & Publishing 1994-1999 Yuriko Ienaga yuri@ncdesign.org