Antennahouse Autofit Text

In example you see the options how to fit over long text into a given bounding box using Antennahouse's -ah-overflow-condense options.

Repository files

PDF files

Converter Status PDF Preview
Antennahouse  OK
OK OK with issues Error Unsupported

HTML input

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

    <h1>Box with text overflow</h1>   
    <div class="box">
        <!--lorem--> <p>Mauris aliquam mauris ut tortor. Pellentesque
        tincidunt mattis nibh. In id lectus eu magna vulputate ultrices. Aliquam
        interdum varius enim. Maecenas at mauris. Sed sed nibh. Nam non turpis.
        Maecenas fermentum nibh in est. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas.</p>

        <p>Duis sagittis fermentum nunc. Nullam elementum erat. Quisque dapibus, augue
        nec dapibus bibendum, velit enim scelerisque sem, accumsan suscipit lectus odio
        ac justo. Fusce in felis a enim rhoncus placerat. Cras nec eros et mi egestas
        facilisis. In hendrerit tincidunt neque. Maecenas tellus. Fusce sollicitudin
        molestie dui. Sed magna orci, accumsan nec, viverra non, pharetra.</p>
        <!--/lorem-->
    </div>

    <h1>Auto fit using font stretching</h1>   
    <div class="box" id="box1">
        <!--lorem--> <p>Mauris aliquam mauris ut tortor. Pellentesque
        tincidunt mattis nibh. In id lectus eu magna vulputate ultrices. Aliquam
        interdum varius enim. Maecenas at mauris. Sed sed nibh. Nam non turpis.
        Maecenas fermentum nibh in est. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas.</p>

        <p>Duis sagittis fermentum nunc. Nullam elementum erat. Quisque dapibus, augue
        nec dapibus bibendum, velit enim scelerisque sem, accumsan suscipit lectus odio
        ac justo. Fusce in felis a enim rhoncus placerat. Cras nec eros et mi egestas
        facilisis. In hendrerit tincidunt neque. Maecenas tellus. Fusce sollicitudin
        molestie dui. Sed magna orci, accumsan nec, viverra non, pharetra.</p>
        <!--/lorem-->
    </div>

    <h1>Auto fit by adjusting font-size</h1>   
    <div class="box" id="box2">
        <!--lorem--> <p>Mauris aliquam mauris ut tortor. Pellentesque
        tincidunt mattis nibh. In id lectus eu magna vulputate ultrices. Aliquam
        interdum varius enim. Maecenas at mauris. Sed sed nibh. Nam non turpis.
        Maecenas fermentum nibh in est. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas.</p>

        <p>Duis sagittis fermentum nunc. Nullam elementum erat. Quisque dapibus, augue
        nec dapibus bibendum, velit enim scelerisque sem, accumsan suscipit lectus odio
        ac justo. Fusce in felis a enim rhoncus placerat. Cras nec eros et mi egestas
        facilisis. In hendrerit tincidunt neque. Maecenas tellus. Fusce sollicitudin
        molestie dui. Sed magna orci, accumsan nec, viverra non, pharetra.</p>
        <!--/lorem-->
    </div>

    <h1>Auto fit by adjusting letter-spacing</h1>   
    <div class="box" id="box3">
        <!--lorem--> <p>Mauris aliquam mauris ut tortor. Pellentesque
        tincidunt mattis nibh. In id lectus eu magna vulputate ultrices. Aliquam
        interdum varius enim. Maecenas at mauris. Sed sed nibh. Nam non turpis.
        Maecenas fermentum nibh in est. Pellentesque habitant morbi tristique
        senectus et netus et malesuada fames ac turpis egestas.</p>

        <p>Duis sagittis fermentum nunc. Nullam elementum erat. Quisque dapibus, augue
        nec dapibus bibendum, velit enim scelerisque sem, accumsan suscipit lectus odio
        ac justo. Fusce in felis a enim rhoncus placerat. Cras nec eros et mi egestas
        facilisis. In hendrerit tincidunt neque. Maecenas tellus. Fusce sollicitudin
        molestie dui. Sed magna orci, accumsan nec, viverra non, pharetra.</p>
        <!--/lorem-->
    </div>
    </body>
</html>

Stylesheet

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

div.box {
    text-align: justify;
    width: 6cm;
    height: 6cm;
    border: 2px solid blue;
    padding: 0.1em;
    font-size: 10pt;
    margin-bottom: 1em;
    break-after: page;
    hyphens: auto;
}


#box1 {
    overflow:condense;
    -ah-overflow-condense: font-stretch;
}

#box2 {
    overflow:condense;
    -ah-overflow-condense: font-size;
}

#box3 {
    overflow:condense;
    -ah-overflow-condense: letter-spacing;
}