Ligatures

Simple text with and without ligatures.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  UNSUPPORTED
does not support ligatures in version 11
PrinceXML  OK
Antennahouse  OK
Weasyprint  (OK)
unable to disable ligatures for serif font
PagedJS  OK
Typeset.sh  UNSUPPORTED
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

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

Stylesheet

@import url("../styles/a5.css");

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

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

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


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

.serif {
    font-family: Gentium;
}