letter-spacing

This section shows the usage of the letter-spacing property.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="reset.css" />
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div id="block1">
            <h1>letter-spacing: normal</h1>
            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.
        </div>

        <div id="block2">
            <h1>letter-spacing: 0.1em</h1>
            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.
        </div>

        <div id="block3">
            <h1>letter-spacing: 0.2em</h1>
            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.
        </div>

    </body>
</html>

Stylesheet

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

body {
    font-size: 12pt;
    line-height: 1.2em;
}

h1 {
    font-size: 16pt;
    margin: 0;
    padding: 0;
    margin-bottom: 1em;
    font-weight: bold;
}   

#block1, 
#block2,
#block3 {
    border: 1px solid blue;
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
}

#block1 {
    letter-spacing: normal;
}

#block2 {
    letter-spacing: 0.1em;
}

#block3 {
    letter-spacing: 0.2em;
}