<?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.main { position:absolute; right:0; top:0; width:500px; height:800px; overflow:hidden; background-color:#eeeeee;  }
            div.column { width:500px; height:200px; float:left }
           .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 class="main">
        <div class="column">
            <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>
        </div><div class="column">
        <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>
        </div><div class="column">
        <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>
        </div>
        </div>
              
        
        
    </body>
</html>