Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Test of text-box-trim on fragmented inline boxes</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
<style>
.spacer {
block-size: 100px;
background: lightgray;
}
.container {
font: 100px/1 BaselineDiagnosticAlphabeticZero;
}
.target {
position: relative;
}
.target::before {
content: '';
position: absolute;
top: calc(var(--baseline-diagnostic-alphabetic-zero-cap-height) * 1em);
right: 0;
bottom: calc((1 - var(--baseline-diagnostic-alphabetic-zero-alphabetic)) * 1em);
left: 0;
z-index: -1;
background: green;
}
</style>
<div class="spacer"></div>
<div class="container">
<span class="target">█BxIF</span>
<br>
<span class="target">█BxIF</span>
<br>
<span class="target">█BxIF</span>
</div>
<div class="spacer"></div>