Lesson: lesson-typography

This test show the usage of the :first-letter and :first-line pseudo selectors.

PDF files

Converter PDF Preview
PDFreactor
ERROR
Download
no support for :first-line
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@import url("../styles/a5.css");


p.first-letter::first-letter {
    font-size: 2em;
    color: pink;
    font-weight: bold;
}

p.first-letter-multi::first-letter {
    font-size: 40px;
    color: pink;
    font-weight: bold;
    height:40px;
    font-size:40px;
    line-height:40px;
    position:relative;
    float:left;
    display:block;
}

p.first-line::first-line {
    font-size: 2em;
    color: pink;
    font-weight: bold;
    text-transform: uppercase;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h1>:first-letter</h1>
        <p class="first-letter"> Pulvinar non pellentesque pellentesque nisi nascetur
        elementum platea turpis, eu, pulvinar et, a mauris, etiam vel,
        facilisis mus, egestas in dapibus sagittis ac mattis. Phasellus massa
        cum, habitasse augue sagittis, turpis penatibus auctor sagittis aenean
        in! Aenean porta tincidunt ultricies est lorem, facilisis dignissim
        tempor auctor ut sociis pulvinar eros egestas eros placerat habitasse,
        mid sed mattis velit platea aliquam, purus lorem, lacus et integer.
        Nec cursus augue.  </p>

        <h1>:first-letter</h1>
        <p class="first-letter-multi"> In lundium nisi pid ac urna porta ultrices in odio? Lundium augue tincidunt
        velit ultrices mauris? Pid lacus est, dignissim etiam pulvinar integer etiam,
        arcu rhoncus, pid penatibus odio phasellus, sit mattis, augue montes cursus
        ridiculus, adipiscing ac? Ac? Nunc sed cum! Sociis augue etiam! Pid a
        dignissim, turpis elit dis lorem nec et tempor augue mattis in ultricies enim?
        In, facilisis. Tortor?  Rhoncus aliquet dapibus sit. Natoque et cras quis cursus
        amet.  </p>

        <h1>:first-line</h1>
        <p class="first-line"> Penatibus proin? Scelerisque adipiscing porta dolor rhoncus enim, nec
        integer platea! Etiam, enim ridiculus aliquam amet ac odio tristique, hac,
        aenean eu placerat magna tristique massa ut, et, enim? Lectus mid etiam? Magna
        non mattis penatibus nunc sed elit, et, placerat phasellus porta? Sit! Est
        tristique phasellus? Turpis nec! Cursus non magnis duis platea nunc, nunc
        platea tristique turpis tincidunt nunc mus et in nisi et magnis? Nascetur sit
        mattis in? Eros pid penatibus. Nec et dapibus enim.  </p>

    </body>
</html>