11 October 2018

Text

Vinh Mai

1/54
Overview

1 Text - heading
2 Text - grouping content
3 Text-level semantics
4 Text Css

2/54
Text - Heading

Search engines use the headings to index the structure and content
of your web pages.
Main heading: h1
Subheading: h2
Subsubheading: h3 - h6

3/54
Text - Heading

Each HTML heading has a default size and text bold.

h1 → 2em → 32px
h2 → 1.5em → 24px
h3 → 1.17em → 18.72px
h4 → 1em → 16px (default font-size browser)
h5 → 0.83em → 13.28px
h6 → 0.67em → 10.72px

4/54
Text - Grouping content

Blockquote
Preformeted
Horizontal rule
Author detail
Paragraph

5/54
Text - Grouping content

Paragraph
represents a paragraph.

<p>
The p element represents a paragraph.
</p>

6/54
Text - Grouping content

Preformeted
a block of preformatted text

<pre>
The p element represents a paragraph.
Structure based on Typing.
</pre>

7/54
Text - Grouping content

Author detail
contact information for a person, people or organization

<address>
<p> BK University </p>
<p> 268 Ly Thuong Kiet street, 14 ward</p>
<p> Phone: (028) 2214 6555.</p>
</address>

8/54
Text - Grouping content

Horizontal rule
a paragraph-level thematic break

<section>
<h2> heading </h2>
<p> paragraph </p>
<hr> // horizontal rule
<p> paragraph </p>
</section>

9/54
Text-level semantics

<a>
<em> <q>, <blockquote>
<strong> <dfn>
<small> <abbr>
<s> <data>
<cite> <time>
<ruby>, <rt>, <code>
<rp>, <rb>, <rtc>

10/54
Text-level semantics

<var> <b>
<samp> <u>
<kbd> <mark>
<sub> <bdi>
<sup> <bdo>
<i> <span>
<br> <wbr>

11/54
Text-level semantics

em tag
emphasized text

<p>
// font weight is bold
<em>Cats are <em>cute</em> animals!</em>
</p>

12/54
Text-level semantics

strong tag
important text

<p>
// font weight is bold
This tea is <strong>very hot</strong>.
</p>

13/54
Text-level semantics

br tag
line break

<p>
Simply Orange Juice Company <br> Apopka, FL
32703<br>U.S.A.
</p>

14/54
Text-level semantics

wbr tag
word break opportunity

<p>
Simply Orange Juice Company <wbr> Apopka, FL 32703
<wbr>U.S.A. // inline-block
</p>

15/54
Text-level semantics

small tag
smaller text

<p>
<small>Copyright 1999-2050 by Refsnes Data</small>
</p>

16/54
Text-level semantics

dfn tag
defining instance of a term

<p>
<dfn title="HyperText Markup Language">HTML</dfn>
is the standard markup language for creating web
pages.
</p>

17/54
Text-level semantics

cite tag
the title of a work (book, song, moive...)

<p>
<cite>The Scream</cite> by Edward Munch. Painted in
1893.
</p>

18/54
Text-level semantics

s tag
text that is no longer correct, accurate or relevant

<p><s>My car is blue.</s></p> // line through

<p>My new car is silver.</p>

19/54
Text-level semantics

blockquote and q tag

quote from another source

// block
<blockquote cite="http://"> text </blockquote>

<q cite="http://"> text </q> // inline

20/54
Text-level semantics

abbr tag
an abbreviation

The
<abbr title="World Health Organization">WHO</abbr>
was founded in 1948.

// MS -> Master of Science

// PhD -> Doctor of physolophy

21/54
Text-level semantics

time, data tag

<p>
We open at <time>10:00</time> every morning.
</p>

<data value="21053">Cherry Tomato</data>

22/54
Text-level semantics

sub, sup tag

sup: 22 , sub: 22
<spab> 2₂ </span> // subscript 2_2

<spab> 2² </span> // superscript 2^2

23/54
Text-level semantics

i tag
a technical term, a phrase from another language, a thought

<p>There is a certain
<i lang="fr">je ne sais quoi</i>
in the air.</p>

24/54
Text-level semantics

span tag
non semantic
group of text, inline elements

<span>
<i lang="en"></i>
<span></span>
</span>

25/54
Text-level semantics

b tag
bold text

<p>This is normal text -

<b>and this is bold text</b>
</p>

26/54
Text-level semantics

bdo tag
override the current text direction

// default: ltr
<bdo dir="rtl">
This text will go right-to-left.
</bdo>

27/54
Text-level semantics

mark tag
highlight parts of text.

<p>
Do not forget to buy
<mark>milk</mark> today. // yellow color
</p>

28/54
Text CSS

Font

font-optical-sizing
font-family
font-size-adjust
font-size
font-stretch
font-weight
font-variant
font-style
font-kerning

29/54
Text CSS - Font

font-family
Generic family:
Serif: have small lines at the ends on some characters
Ex: Times New Roman, Georgia
Sans-serif
Ex: Arial, Verdana
Monospace: All characters have the same width
Ex: Courier New, Lucida Console

30/54
Text CSS - Font

font-family
Font stacks:
// alternative fonts
p {
font-family: "Times New Roman", Times, serif;
}

31/54
Text CSS - Font

font-weight
The weight of a font: 100 - 900
normal → 400
lighter → 100
bold, bolder → 700

32/54
Text CSS - Font

font-size
Sets the size of the text. Default font-size 16px
Types:

keywords: x-small, smaller, large, x-large...

length: px, em, rem
percentage: %

33/54
Text CSS - Font

font-size: length
px
em: based on the nearest parent
rem: based on root element(html)

34/54
Text CSS - Font

font-size: length
Example em:
<html> // font-size: 14px
<body>
<div> // font-size: 16px // base here
<p> paragraph </p>
// font-size: 1.5em -> 24px
</div>
</body>
</html>

35/54
Text CSS - Font

font-size: length
Example rem:
<html> // font-size: 14px // base here
<body>
<div> // font-size: 16px
<p> paragraph </p>
// font-size: 1.5rem -> 21px
</div>
</body>
</html>

36/54
Text CSS - Font

font-style
normal
italic → The text is shown in italics
oblique → Similar to italic, but less supported

37/54
Text CSS - Font

Custom Font
@font-face {
font-family: "Open Sans"; // specifies name font
// resource containing the font data
src: url("/fonts/OpenSans-webfont.woff")
format("woff")
}

body {
font-family: "Open Sans", serif
}

38/54
Text CSS - Text
Uppercase, Lowercase
text-tranform property
uppercase
lowercase
capitalize: first letter

PRAGRAPH // uppercase

paragraph // lowercase

Pragraph // capitalize

39/54
Text CSS - Text

Underline, Strike
text-decoration property
text-decoration-line (required)
none
underline
overline: line overhead
line-through: line through
text-decoration-style: solid, dotted...
text-decoration-color

40/54
Text CSS - Text

Underline, Strike
text-decoration property
Example:
// link tag
a { text-decoration: none }

a:hover { text-decoration: underline #000 }

41/54
Text CSS - Text

Letter, word spacing

letter-spacing and word-spacing properties
letter-spacing: space between characters
word-spacing: space between words

42/54
Text CSS - Text

work-wrap(overflow-wrap), work-break properties

work-wrap property
Allow long words to be able to break and wrap onto next line.
normal(default): breat at ’ ’, ’-’
break-word: Allows unbreakable words to be broken

43/54
Text CSS - Text

work-wrap(overflow-wrap), work-break properties

work-break property
words should break when reaching the end of a line
normal(default): break at ’ ’, ’-’
break-all: break at any characters of any words
keep-all: Don’t apply to CJK text. Like normal.
break-word: break at arbitrary points of long word

44/54
Text CSS - Text

Text overflow
text-overflow property
clip: default, text is hidden
ellipsis: replace hidden text to ’...’
string: replace hidden text to custom string.

45/54
Text CSS - Text
Text overflow
text-overflow property
Example:
div {
white-space: nowrap // one line
width: 50px
overflow: hidden // prevent overflow (boxes)
text-overflow: ellipsis // replace text to
"..."
}

46/54
Text CSS - Text

Horizontal alignment
text-align property
The horizontal alignment of text
left: Aligns the text to the left
right
center
justify : Stretches the lines so that each line has equal width

47/54
Text CSS - Text

Horizontal alignment
Text-align-last property
Align the last line of a text. Similar to text-align
Not support Safari
start, end attributes: Not support Edge/IE
justify attribute: Edge/IE only work on this property

48/54
Text CSS - Text

Vertical alignment
vertical-align property
baseline(default)
sub
super
text-top
text-bottom

49/54
Text CSS - Text

Vertical alignment
vertical-align property
top
middle
bottom
length
%

50/54
Text CSS - Text

Indenting text
text-indent property
The indentation of the first line in a text-block
Allow negative values

p {
text-indent: 10px
}

51/54
Text CSS - Text

Height of a line
line-height property
number: 1.4 - 1.5
length
%

52/54
Text CSS - Text

White space
white-space property
How white-space inside an element is handled
normal(default): whitespaces will collapse into a single
nowrap: one line (except br tag)
pre
pre-line
pre-wrap

53/54
Text CSS - Text

Drop shadow
text-shadow property
Adds shadow to text
text-shadow: horizontal vertical blur color
Allow nagative values

text-shadow: 1px 1px 0 #000,

0 2px 1px #FFF

54/54