| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <body> |
| 3 <canvas id="canvas" width=800 height=450 style="border:5px solid black"> |
| 4 <script> |
| 5 if (window.testRunner) |
| 6 testRunner.dumpAsTextWithPixelResults(); |
| 7 |
| 8 var ctx = document.getElementById('canvas').getContext('2d'); |
| 9 |
| 10 var x = 10; |
| 11 var y = 50; |
| 12 |
| 13 ctx.font = "32px 'Times New Roman'"; |
| 14 |
| 15 ctx.lineWidth = 1; |
| 16 ctx.textBaseline="alphabetic"; |
| 17 |
| 18 ctx.strokeStyle = '#000000'; |
| 19 var dashList = [2,10]; |
| 20 ctx.setLineDash(dashList); |
| 21 ctx.beginPath(); |
| 22 ctx.moveTo(0, y); |
| 23 ctx.lineTo(800, y); |
| 24 ctx.closePath(); |
| 25 ctx.stroke(); |
| 26 ctx.strokeStyle = '#888888'; |
| 27 ctx.setLineDash([]); |
| 28 |
| 29 var text = "Alphabetic baseline"; |
| 30 var w = ctx.measureText(text).width; |
| 31 ctx.fillText(text, x, y); |
| 32 var ab = ctx.measureText(text).alphabeticBaseline; |
| 33 // Alphabetic Baseline : positive numbers indicate that the given baseline is be
low |
| 34 ctx.beginPath(); |
| 35 ctx.moveTo(x, y+ab); |
| 36 ctx.lineTo(w+x, y+ab); |
| 37 ctx.closePath(); |
| 38 ctx.stroke(); |
| 39 |
| 40 x += w + 10; |
| 41 |
| 42 text = "Hanging baseline"; |
| 43 w = ctx.measureText(text).width; |
| 44 ctx.fillText(text, x, y); |
| 45 var hb = ctx.measureText(text).hangingBaseline; |
| 46 // Hanging Baseline : positive numbers indicate that the given baseline is below |
| 47 ctx.beginPath(); |
| 48 ctx.moveTo(x, y+hb); |
| 49 ctx.lineTo(w+x, y+hb); |
| 50 ctx.closePath(); |
| 51 ctx.stroke(); |
| 52 |
| 53 x += w + 10; |
| 54 |
| 55 text = "Ideographic baseline"; |
| 56 w = ctx.measureText(text).width; |
| 57 ctx.fillText(text, x, y); |
| 58 var ib = ctx.measureText(text).ideographicBaseline; |
| 59 // Ideographic Baseline : positive numbers indicate that the given baseline is b
elow |
| 60 ctx.beginPath(); |
| 61 ctx.moveTo(x, y+ib); |
| 62 ctx.lineTo(w+x, y+ib); |
| 63 ctx.closePath(); |
| 64 ctx.stroke(); |
| 65 |
| 66 x = 10; |
| 67 y += 80; |
| 68 |
| 69 ctx.strokeStyle = '#000000'; |
| 70 var dashList = [2,10]; |
| 71 ctx.setLineDash(dashList); |
| 72 ctx.beginPath(); |
| 73 ctx.moveTo(0, y); |
| 74 ctx.lineTo(800, y); |
| 75 ctx.closePath(); |
| 76 ctx.stroke(); |
| 77 ctx.strokeStyle = '#888888'; |
| 78 ctx.setLineDash([]); |
| 79 |
| 80 text = "Font ascent"; |
| 81 w = ctx.measureText(text).width; |
| 82 ctx.fillText(text, x, y); |
| 83 var fa = ctx.measureText(text).fontBoundingBoxAscent; |
| 84 // Font Bounding Box Ascent : positive numbers indicate a distance going up |
| 85 ctx.beginPath(); |
| 86 ctx.moveTo(x, y-fa); |
| 87 ctx.lineTo(w+x, y-fa); |
| 88 ctx.closePath(); |
| 89 ctx.stroke(); |
| 90 |
| 91 x += w + 50; |
| 92 |
| 93 text = "Font descent qypg"; |
| 94 w = ctx.measureText(text).width; |
| 95 ctx.fillText(text, x, y); |
| 96 var fd = ctx.measureText(text).fontBoundingBoxDescent; |
| 97 // Font Bounding Box Descent : positive numbers indicate a distance going down |
| 98 ctx.beginPath(); |
| 99 ctx.moveTo(x, y+fd); |
| 100 ctx.lineTo(w+x, y+fd); |
| 101 ctx.closePath(); |
| 102 ctx.stroke(); |
| 103 |
| 104 x = 10; |
| 105 y += 80; |
| 106 |
| 107 ctx.strokeStyle = '#000000'; |
| 108 var dashList = [2,10]; |
| 109 ctx.setLineDash(dashList); |
| 110 ctx.beginPath(); |
| 111 ctx.moveTo(0, y); |
| 112 ctx.lineTo(800, y); |
| 113 ctx.closePath(); |
| 114 ctx.stroke(); |
| 115 ctx.strokeStyle = '#888888'; |
| 116 ctx.setLineDash([]); |
| 117 |
| 118 text = "Actual"; |
| 119 w = ctx.measureText(text).width; |
| 120 ctx.fillText(text, x, y); |
| 121 var aa = ctx.measureText(text).actualBoundingBoxAscent; |
| 122 // Actual Bounding Box Ascent : positive numbers indicate a distance going up |
| 123 ctx.beginPath(); |
| 124 ctx.moveTo(x, y-aa); |
| 125 ctx.lineTo(w+x, y-aa); |
| 126 ctx.closePath(); |
| 127 ctx.stroke(); |
| 128 |
| 129 x += w + 10; |
| 130 |
| 131 text = "ascent"; |
| 132 w = ctx.measureText(text).width; |
| 133 ctx.fillText(text, x, y); |
| 134 var aa = ctx.measureText(text).actualBoundingBoxAscent; |
| 135 // Actual Bounding Box Ascent : positive numbers indicate a distance going up |
| 136 ctx.beginPath(); |
| 137 ctx.moveTo(x, y-aa); |
| 138 ctx.lineTo(w+x, y-aa); |
| 139 ctx.closePath(); |
| 140 ctx.stroke(); |
| 141 |
| 142 x += w + 50; |
| 143 |
| 144 text = "Actual"; |
| 145 w = ctx.measureText(text).width; |
| 146 ctx.fillText(text, x, y); |
| 147 var ad = ctx.measureText(text).actualBoundingBoxDescent; |
| 148 // Actual Bounding Box Descent : positive numbers indicate a distance going down |
| 149 ctx.beginPath(); |
| 150 ctx.moveTo(x, y+ad); |
| 151 ctx.lineTo(w+x, y+ad); |
| 152 ctx.closePath(); |
| 153 ctx.stroke(); |
| 154 |
| 155 x += w + 10; |
| 156 |
| 157 text = "descent"; |
| 158 w = ctx.measureText(text).width; |
| 159 ctx.fillText(text, x, y); |
| 160 var ad = ctx.measureText(text).actualBoundingBoxDescent; |
| 161 // Actual Bounding Box Descent : positive numbers indicate a distance going down |
| 162 ctx.beginPath(); |
| 163 ctx.moveTo(x, y+ad); |
| 164 ctx.lineTo(w+x, y+ad); |
| 165 ctx.closePath(); |
| 166 ctx.stroke(); |
| 167 |
| 168 x += w + 10; |
| 169 |
| 170 text = "qypg"; |
| 171 w = ctx.measureText(text).width; |
| 172 ctx.fillText(text, x, y); |
| 173 var ad = ctx.measureText(text).actualBoundingBoxDescent; |
| 174 // Actual Bounding Box Descent : positive numbers indicate a distance going down |
| 175 ctx.beginPath(); |
| 176 ctx.moveTo(x, y+ad); |
| 177 ctx.lineTo(w+x, y+ad); |
| 178 ctx.closePath(); |
| 179 ctx.stroke(); |
| 180 |
| 181 x = 10; |
| 182 y += 80; |
| 183 |
| 184 ctx.strokeStyle = '#000000'; |
| 185 var dashList = [2,10]; |
| 186 ctx.setLineDash(dashList); |
| 187 ctx.beginPath(); |
| 188 ctx.moveTo(0, y); |
| 189 ctx.lineTo(800, y); |
| 190 ctx.closePath(); |
| 191 ctx.stroke(); |
| 192 ctx.strokeStyle = '#888888'; |
| 193 ctx.setLineDash([]); |
| 194 |
| 195 text = "em Ascent"; |
| 196 w = ctx.measureText(text).width; |
| 197 ctx.fillText(text, x, y); |
| 198 var ea = ctx.measureText(text).emHeightAscent; |
| 199 // em Height Ascent : positive numbers indicate that the given baseline is belo
w the top of the em square |
| 200 ctx.beginPath(); |
| 201 ctx.moveTo(x, y-fa-ea); |
| 202 ctx.lineTo(w+x, y-fa-ea); |
| 203 ctx.closePath(); |
| 204 ctx.stroke(); |
| 205 |
| 206 x += w + 50; |
| 207 |
| 208 text = "em Descent"; |
| 209 w = ctx.measureText(text).width; |
| 210 ctx.fillText(text, x, y); |
| 211 var ed = ctx.measureText(text).emHeightDescent; |
| 212 // em Height Descent : positive numbers indicate that the given baseline is bel
ow the bottom of the em square |
| 213 ctx.beginPath(); |
| 214 ctx.moveTo(x, y+fd+ed); |
| 215 ctx.lineTo(w+x, y+fd+ed); |
| 216 ctx.closePath(); |
| 217 ctx.stroke(); |
| 218 |
| 219 x = 10; |
| 220 y += 80; |
| 221 |
| 222 ctx.strokeStyle = '#000000'; |
| 223 var dashList = [2,10]; |
| 224 ctx.setLineDash(dashList); |
| 225 ctx.beginPath(); |
| 226 ctx.moveTo(0, y); |
| 227 ctx.lineTo(800, y); |
| 228 ctx.closePath(); |
| 229 ctx.stroke(); |
| 230 ctx.strokeStyle = '#888888'; |
| 231 ctx.setLineDash([]); |
| 232 |
| 233 text = "Left Bound"; |
| 234 w = ctx.measureText(text).width; |
| 235 ctx.fillText(text, x, y); |
| 236 var lb = ctx.measureText(text).actualBoundingBoxLeft; |
| 237 // Actual Bounding Box Left : positive numbers indicating a distance going left |
| 238 ctx.beginPath(); |
| 239 ctx.moveTo(x-lb, y+fd); |
| 240 ctx.lineTo(x-lb, y-fa); |
| 241 ctx.closePath(); |
| 242 ctx.stroke(); |
| 243 |
| 244 x += w + 50; |
| 245 |
| 246 text = "Right Bound"; |
| 247 w = ctx.measureText(text).width; |
| 248 ctx.fillText(text, x, y); |
| 249 var rb = ctx.measureText(text).actualBoundingBoxRight; |
| 250 // Actual Bounding Box Right : positive numbers indicating a distance going rig
ht |
| 251 ctx.beginPath(); |
| 252 ctx.moveTo(x+rb, y+fd); |
| 253 ctx.lineTo(x+rb, y-fa); |
| 254 ctx.closePath(); |
| 255 ctx.stroke(); |
| 256 |
| 257 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 141433026:
Font metrics, version 1 (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master