blob: 2ab40960c90a487835e3ca9997fc54713198d4eb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait">
<foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject>
<rect width="100%" height="100%" fill="lime"/>
<g fill="red">
<text dominant-baseline="hanging" x="70" y="70">hanging</text>
<text dominant-baseline="mathematical" x="70" y="140">mathematical</text>
</g>
<g fill="lime">
<text id="hanging" x="70" y="70" dy="0">hanging</text>
<text id="mathematical" x="70" y="140" dy="0">mathematical</text>
</g>
<style><![CDATA[
text {
font: bold 30px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
<script>
function cover(element) {
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
let bbox = element.getBBox();
rect.x.baseVal.value = bbox.x;
rect.y.baseVal.value = bbox.y;
rect.width.baseVal.value = bbox.width;
rect.height.baseVal.value = bbox.height;
element.parentElement.appendChild(rect);
}
onload = function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif';
let text = 'h';
let textMetrics = ctx.measureText(text);
let hanging = document.getElementById("hanging");
hanging.dy.baseVal[0].value = textMetrics.actualBoundingBoxAscent * 1.1;
cover(hanging);
let mathematical = document.getElementById("mathematical");
mathematical.dy.baseVal[0].value = textMetrics.actualBoundingBoxAscent / 2 * 1.4;
cover(mathematical);
document.documentElement.removeAttribute('class');
}
</script>
</svg>
|
