<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style>
            html { writing-mode: vertical-rl }
            body { margin:0;  overflow:hidden  }
            div { column-width:200px; width:500px; height:800px; overflow:hidden; column-gap:0; background-color:#eeeeee; column-fill:auto }
            .test-name {
                font-size:1em;
                font-weight:bold;
                line-height:1.2;
            }
        p {
            margin:0;
        }
        .drop::first-letter {
            -webkit-initial-letter:4 3;
            initial-letter:4 3;
            padding-bottom:0.1em;
            font-weight:normal;
        }
        .brk-after {
            -webkit-column-break-after: always;
        }
        .most-of-the-page {
            width:90px;
            background-color:#DEF;
            height:200px;
        }
        </style>
    </head>
    <body>
        <div>
        <p class="drop"><b>Example A: This dropcap appears naturally at the top of the page.</b> Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
        
        <p class="brk-after">This paragraph has page-break-after:always; set on it.</p>
        
        <p class="drop"><b>Example B: This dropcap appears after a CSS-induced page break.</b> Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
        
        <p class="most-of-the-page">This block takes up most of a page, forcing the next paragraph to a new page.</p>
        
        <p class="drop"><b>Example C: This dropcap is forced to the top of a new page by being near the bottom of the page.</b> Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. </p>
        
              
        
        
    </body>
</html>