31 lines
667 B
HTML
31 lines
667 B
HTML
<!DOCTYPE html>
|
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
|
<style>
|
|
body {
|
|
font: 50px/1 Ahem;
|
|
}
|
|
span {
|
|
text-wrap: nowrap;
|
|
}
|
|
p {
|
|
word-break: break-all;
|
|
inline-size: calc(6em + 5px);
|
|
}
|
|
.mc {
|
|
columns: 2 calc(6em + 5px);
|
|
column-gap: 10px;
|
|
inline-size: calc(12em + 10px + 10px);
|
|
block-size: 80px;
|
|
}
|
|
.indent {
|
|
text-indent: -1em;
|
|
}
|
|
</style>
|
|
<p>zzz<ruby><span>mmm</span><rt><span>mmmmmm</span></ruby> <ruby><span>mm</span><rt><span>mmmm</span></ruby>zzz
|
|
</p>
|
|
|
|
<p class="mc">zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz
|
|
</p>
|
|
|
|
<p class="indent">zzz<ruby>mmmm<rt>mmmmmmmm</ruby><br><ruby>m<rt>mm</ruby>zzz
|
|
</p>
|