Chapter 4. Text Properties
4.1.1.1. Indenting text
<html>
<body bgcolor=”yellow”>
<P CLASS=”hang”><IMG SRC=”planet.jpg” WIDTH=”30px” HEIGHT=”60px”
ALIGN=”left” ALT=”Floated”>This paragraph has a negatively indented first
line, which overlaps the floated image which precedes the text. Subsequent
lines do not overlap the image, since they are not indented in any way.</P>
<br>sss
<P>This paragraph is contained inside a DIV which is 400px wide, so the
first line of the paragraph is indented 20px (400 * 5% = 20). This is because
percentages are computed with respect to the width of the parent element.</P>
<br>
<DIV>
<P>This paragraph is contained inside a DIV which is 400px wide, so the
first line of the paragraph is indented 20px (400 * 5% = 20). Subsequent
lines within the same element are not indented,<BR>
even if they follow a<BR>
line-break.</P>
<P>Once again, the first line of this paragraph is indented by 20px,
but other lines in the same element are not.</P>
</DIV>
<br>
<DIV>
This first line of the DIV is indented by 50 pixels.
<P>This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for ‘text-indent’
are inherited, instead of the declared values.</P>
</DIV>
</body>
</html>

4.1.1.1


4.1.1.2. Aligning text

<html>
<body bgcolor=”yellow”>
<H1>An Un-centered H1 Element</H1>
<DIV CLASS=”first”>
<P>
This is a paragraph without any alignment styles applied to it. However, it is
contained within a DIV element which has alignment set, and this alignment will
inherit into the paragraph. This will also affect any images which appear within
the DIV, such as this one <IMG SRC=”planet.jpg”> or the next one.
</P>
<IMG SRC=”sun_strom.jpg”>
</DIV>
<br>
<DIV STYLE=”text-align: center;”>
<IMG SRC=”sun_strom.jpg” ALT=”Shiny object”>
</DIV>
</body>
</html>
4.1.1.2
4.1.1.3. Handling whitespace

<html>
<body bgcolor=”yellow”>
<P>This paragraph has many
spaces in it.</P>
<br>
<P>This paragraph has many
spaces in it.</P>
<br>
<P STYLE=”white-space: nowrap;”>This paragraph is not allowed to wrap,
which means that the only way to end a line is to insert a line-break
element. If no such element is inserted, then the line will go forever,
forcing the user to scroll horizontally to read whatever can’t be
initially displayed <BR>in the browser window.</P>
<br>
<TABLE bgcolor=”red”><TR bgcolor=”lime”>
<TD>The contents of this cell are not wrapped.</TD>
<TD>Neither are the contents of this cell.</TD>
<TD>Nor this one, or any after it, or any other cell in this table.</TD>
<TDsss>CSS prevents any wrapping from happening.</TD>
</TR></TABLE>
</body>
</html>

4.1.1.3

4.1.2. The Height of Lines

<html>
<body bgcolor=”yellow”>
<P>This paragraph inherits a ‘line-height’ of 14pt from the BODY, as well as
a ‘font-size’ of 13pt.</P>
<P CLASS=”one”>This paragraph has a ‘line-height’ of 16.8pt (14 * 1.2), so
it will have slightly more line-height than usual.</P>
<P CLASS=”two”>This paragraph has a ‘line-height’ of 15pt (10 * 150%), so
it will have slightly more line-height than usual.</P>
<P CLASS=”three”>This paragraph has a ‘line-height’ of 0.33in, so it will have
slightly more line-height than usual.</P>
<br>
<DIV>
<P>This paragraph’s ‘font-size’ is 18pt, but the inherited ‘line-height’
is only 12pt. This may cause the lines of text to overlap each other by
a small amount.</P>
</DIV>
<br>
<DIV>
<P>This paragraph’s ‘font-size’ is 18pt, and since the ‘line-height’
set for the parent DIV is 1.5, the ‘line-height’ for this paragraph
is 27pt (18 * 1.5).</P>
</DIV>
<br>
<P>This paragraph’s ‘font-size’ is 18pt, and the ‘line-height’ for this
paragraph is 23pt. However, a <BIG>larger element</BIG> within the
paragraph does not cause the value of ‘line-height’ to change, which can
lead to some interesting effects.</P>

<P>This paragraph’s ‘font-size’ is 18pt, and the ‘line-height’ for this
paragraph is 27pt. A <BIG>larger element</BIG> within the paragraph does
not cause the line’s height to change, but setting its ‘line-height’ does,
which leads to some interesting effects.</P
</body>
</html>

4.1.2

4.1.3.1. Baseline alignment
<html>
<body bgcolor=”lime”>
<P>The baseline of the <B>boldfaced text</B> is aligned with the baseline
of this paragraph.</P><br><br>
<P>The image found in this paragraph <IMG SRC=”dot.gif” ALT=”a dot”> has its
bottom edge aligned with the baseline of the paragraph.</P>

</body>

</html>
4.1.3.1

4.1.3.2. Superscripting and subscripting
<html>
<body bgcolor=”lime”>
<P>This paragraph contains <SUB>subscripted</SUB> text.</P><br><br>
<P>This paragraph contains <SUP>superscripted</SUP> text.</P></body></html>

4.1.3.2

4.1.3.3. Bottom feeding
<html>
<body bgcolor=”lime”>
<P>This paragraph contains an image <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> which is tall, and another image <IMG SRC=”short.gif”
CLASS=”feeder” ALT=”short image”> which is not tall.</P><br><br>
<P>Here: a <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”tbot” ALT=”short image”> short image.</P>
</html>
</body>

4.1.3.3

4.1.3.4. Getting on top
<html>
<body bgcolor=”lime”>
<P>Here: a <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”up” ALT=”short image”> short image.</P>
<P> Here: a <IMG SRC=”tall.gif” CLASS=”textup”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”textup” ALT=”short image”> short image.</P</body>
</html>
4.1.3.4


4.1.3.6. Percentages

<html>
<body bgcolor=”lime”>
<P>This paragraph contains some <B>boldfaced</B> text, which is raised
up 100%. This makes it look as though it’s on a preceding line.</P>
<br>
<P>We can either <SUP>soar to new heights</SUP> or, instead,
<SUB>sink into despair…</SUB></P>
<br>
<P>Some <IMG SRC=”tall.gif” alt=”tall image”>
<IMG SRC=”short.gif” CLASS=”up” ALT=”short image”> text.</P</body>
</html>
4.1.3.6


4.1.4.1. Word spacing

<html>
<body bgcolor=”lime”>
<P>The spaces between words in paragraphs will be increased by 0.2em.</P>
<br>
<P>The spaces between words in paragraphs will be decreased by 0.4em.</P>
</html>
</body>

4.1.4.1

4.1.4.2. Letterspacing
<html>
<body bgcolor=”lime”>
<P>The letters in this paragraph are spaced as normal.</P>
<P CLASS=”spacious”>The letters in this paragraph are spread out a bit.</P>
<P CLASS=”tight”>The letters in this paragraph are smooshed together a bit.</P>
<P>This paragraph contains <STRONG>strongly emphasized text</STRONG>
which is spread out for extra emphasis.</P</body>
</html>
4.1.1.2

4.1.4.3. Spacing, alignment, and font size
<html>
<body bgcolor=”lime”>
<P>This spacious paragraph features <SMALL>tiny text which is just
as spacious</SMALL>, even though the author probably wanted the
spacing to be in proportion to the size of the text.</P>
<P>This spacious paragraph features <SMALL>tiny text which is
proportionally spacious</SMALL>, which is what the autho
probably wanted.</P</body>
</html>

4.1.4.3

4.1.5. Text Transformation
<html>
<body bgcolor=”lime”>
<H1>The heading-one at the beginninG</H1>
<P>
By default, text is displayed in the capitalization it has in the source
document, but <STRONG>it is possible to change this</STRONG> using
the property ‘text-transform’.
</P>
<P CLASS=”cummings”>
For example, one could Create TEXT such as might have been Written by
the late Poet E.E.Cummings.
</P>
<P CLASS=”raw”>
If you feel the need to Explicitly Declare the transformation of text,
that can be done as well.
</P>
<br>
<H1>This is an H1 element</H1
</body>
</html>

4.1.5

4.1.6.1. Weird decorations
<html>
<body bgcolor=”lime”>
<P><u>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which has the black underline beneath it as well.</P>
<br>
<P>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which does not have black underline beneath it.</P>
<br>
<P>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which does not have black underline beneath it.</P></u</body>
</html>

4.1.6.1