initial-letter-block-position-raise-over-ruby-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

<title>Tests initial letter with over ruby</title>

<link rel="author" title="Google LLC" href="https://www.google.com/">

<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position">

<meta name="flags" content="ahem">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >

<style>

    .sample {

        border: solid 1px green;

        font-family: Ahem;

        font-size: 20px;

        line-height: 24px;

        width: 230px;

    .fake-initial-letter {

        background: lime;

        float: left;

        height: 80px;

        margin-top: 2px;

        width: 80px;

    .surrounding {

        display:inline-block;

        margin-top: -16px;

</style>

</head>

<body>

<div class="sample">

<div class="fake-initial-letter"></div><br><br>

<div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div>

def<br>ghi<br>jkl<br>mno<br>

</div>

</body>

</html>