Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: 'Ahem';
src: url('../fonts/Ahem.ttf');
}
body {
position: relative;
font: 40px/1 Ahem;
}
#ref {
writing-mode: vertical-lr;
}
.baseline {
position: absolute;
top: 50px;
}
.baseline.top div { translate: -1em; }
.baseline.middle div { translate: -0.5em; }
.baseline.alphabetic div { translate: -0.2em; }
.baseline.bottom div { translate: 0; }
/* Visualizes the baseline */
.baseline::before {
content: "|";
position: absolute;
top: -20px;
bottom: -20px;
display: block;
width: 2px;
background: #0008;
translate: -50%;
color: transparent;
}
</style>
</head>
<body>
<div id="ref">
<div class="baseline top" style="left: 100px;"><div>ApÉx</div></div>
<div class="baseline middle" style="left: 150px;"><div>ApÉx</div></div>
<div class="baseline alphabetic" style="left: 200px;"><div>ApÉx</div></div>
<div class="baseline bottom" style="left: 250px;"><div>ApÉx</div></div>
</div>
<script type="text/javascript">
function test(x, y, style, baseline) {
var canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
canvas.style.cssText = 'position:absolute;' + style;
document.getElementsByTagName('body')[0].appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.5;
ctx.font = getComputedStyle(document.body).font;
if (baseline != '') {
ctx.textBaseline = baseline;
}
ctx.fillText('ApÉx', x, y);
}
document.fonts.ready.then(() => {
test(100, 50, 'writing-mode:vertical-lr', 'top');
test(150, 50, 'writing-mode:vertical-lr', 'middle');
test(200, 50, 'writing-mode:vertical-lr', 'alphabetic');
test(250, 50, 'writing-mode:vertical-lr', 'bottom');
});
</script>