Lesson: lesson-ligatures

Simple text with and without ligatures.

PDF files

Converter PDF Preview
PDFreactor
ERROR
Download
does not support ligatures in version 9
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
28
29
@import url("../styles/a5.css");

h1 {
    font-size: 15pt;
    color: red;
    margin-bottom: 1em;
}

div.demo {
    margin-bottom: 1em;
    font-size: 18pt;
    float: left;
    width: 45%;
    min-width: 45%;
}

.with-ligatures {
    -ah-ligature-mode: auto;
    -webkit-font-kerning: auto;
}


.without-ligatures {
    -ah-ligature-mode: none;
}

.serif {
    font-family: Times;
}

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div class="demo with-ligatures">
            <h1> With ligatures</h1>
            <div> fliegen</div>
            <div> Paulus</div>
            <div> finden</div>
            <div> ff</div>
            <div> fj</div>
            <div> Fl</div>
            <div> Fi</div>
            <div> To</div>
        </div>

        <div class="demo without-ligatures">
            <h1> Without ligatures</h1>
            <div> fliegen</div>
            <div> Paulus</div>
            <div> finden</div>
            <div> ff</div>
            <div> fj</div>
            <div> Fl</div>
            <div> Fi</div>
            <div> To</div>
        </div>

        <div class="demo serif with-ligatures">
            <h1> With ligatures</h1>
            <div> fliegen</div>
            <div> Paulus</div>
            <div> finden</div>
            <div> ff</div>
            <div> fj</div>
            <div> Fl</div>
            <div> Fi</div>
            <div> To</div>
        </div>

        <div class="demo serif without-ligatures">
            <h1> Without ligatures</h1>
            <div> fliegen</div>
            <div> Paulus</div>
            <div> finden</div>
            <div> ff</div>
            <div> fj</div>
            <div> Fl</div>
            <div> Fi</div>
            <div> To</div>
        </div>

    </body>
</html>