<!DOCTYPE html >
<html >
<head >
<meta charset="utf-8" >
<style >
@font -face {
font -family: 'Ahem' ;
src: url('../fonts/Ahem.ttf' );
}
body {
position: relative;
font : 40 px/1 Ahem;
}
#ref {
writing-mode: vertical-lr;
}
.baseline {
position: absolute;
top: 50 px;
}
.baseline.top div { translate: -1 em ; }
.baseline.middle div { translate: -0 .5 em ; }
.baseline.alphabetic div { translate: -0 .2 em ; }
.baseline.bottom div { translate: 0 ; }
/* Visualizes the baseline */
.baseline::before {
content: "|" ;
position: absolute;
top: -20 px;
bottom: -20 px;
display: block;
width: 2 px;
background: #0008 ;
translate: -50 %;
color: transparent;
}
</style >
</head >
<body >
<div id="ref" >
<div class="baseline middle" style ="left: 100px;" ><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 ;
ctx.fillText('ApÉx' , x, y);
}
document.fonts.ready.then(() => {
test(100 , 50 , 'writing-mode:vertical-lr;text-orientation:mixed' );
});
</script >
Messung V0.5 in Prozent C=97 H=100 G=98
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland