Basic

This section will show some basic CSS formatting features like bold or italic text and text in different font-sizes.

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="styles.css" />
    </head>
    <body>

        <div class="outer">
            <img src="kanguru.png" class="img-left" alt="Kangaroo">
            <div>
            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>

        <div style="clear: both"></div>

        <div class="outer">
            <img src="kanguru.png" class="img-right" alt="Kangaroo">
            <div>
            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.
            </div>
        </div>
    
        <div style="clear: both"></div>
    
        <div>
            <span style="font-weight: bold">This is bold</span>
        </div>
        <div>
            <span style="font-style: italic">This is italic </span>
        </div>
        <div>
            <span style="font-weight: bold; font-style: italic">This is italic + bold</span>
        </div>

        <div>
            <span style="font-size: 1em">This is font-size 1em</span>
        </div>

        <div>
            <span style="font-size: 2em">This is font-size 2em</span>
        </div>
        <div>
            <span style="font-size: 3em">This is font-size 3em</span>
        </div>
        <div>
            <span style="font-size: 4em">This is font-size 4em</span>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Header: Spalte 1</th>
                    <th>Header: Spalte 2</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Footer: Spalte 1</th>
                    <th>Footer: Spalte 2</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Spalte 1</td>
                    <td>Spalte 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Stylesheet

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

div.outer {
    font-size: 14pt;
    color: red;
    text-align: justify;
    width: 80%;
    margin-bottom: 2em;
}

img {
    width: 20%;
}

.img-left {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.25em;
}

.img-right {
    float: right;
    margin-left: 0.5em;
    margin-bottom: 0.25em;
}


table {
    border: 1px solid black;
    width: 50%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    text-align: center;
}