Merge pull request #9307 from ahocevar/line-height

Take line-height into account when measuring text height

examples/vector-labels.html

@@ -103,6 +103,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1" id="points-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="points-offset-x" />
     <br />
@@ -212,6 +215,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1.2" id="lines-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="lines-offset-x" />
     <br />
@@ -321,6 +327,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1" id="polygons-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="polygons-offset-x" />
     <br />

examples/vector-labels.js

@@ -16,6 +16,7 @@ const myDom = {
     font: document.getElementById('points-font'),
     weight: document.getElementById('points-weight'),
     size: document.getElementById('points-size'),
+    height: document.getElementById('points-height'),
     offsetX: document.getElementById('points-offset-x'),
     offsetY: document.getElementById('points-offset-y'),
     color: document.getElementById('points-color'),
@@ -34,6 +35,7 @@ const myDom = {
     maxangle: document.getElementById('lines-maxangle'),
     overflow: document.getElementById('lines-overflow'),
     size: document.getElementById('lines-size'),
+    height: document.getElementById('lines-height'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
     color: document.getElementById('lines-color'),
@@ -52,6 +54,7 @@ const myDom = {
     maxangle: document.getElementById('polygons-maxangle'),
     overflow: document.getElementById('polygons-overflow'),
     size: document.getElementById('polygons-size'),
+    height: document.getElementById('polygons-height'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
     color: document.getElementById('polygons-color'),
@@ -84,6 +87,7 @@ const createTextStyle = function(feature, resolution, dom) {
   const align = dom.align.value;
   const baseline = dom.baseline.value;
   const size = dom.size.value;
+  const height = dom.height.value;
   const offsetX = parseInt(dom.offsetX.value, 10);
   const offsetY = parseInt(dom.offsetY.value, 10);
   const weight = dom.weight.value;
@@ -98,7 +102,7 @@ const createTextStyle = function(feature, resolution, dom) {
     document.getElementsByTagName('head')[0].appendChild(openSans);
     openSansAdded = true;
   }
-  const font = weight + ' ' + size + ' ' + dom.font.value;
+  const font = weight + ' ' + size + '/' + height + ' ' + dom.font.value;
   const fillColor = dom.color.value;
   const outlineColor = dom.outline.value;
   const outlineWidth = parseInt(dom.outlineWidth.value, 10);

src/ol/render/canvas.js

@@ -288,22 +288,22 @@ function getMeasureContext() {
  * @return {import("../size.js").Size} Measurement.
  */
 export const measureTextHeight = (function() {
-  let span;
+  let div;
   const heights = textHeights;
   return function(font) {
     let height = heights[font];
     if (height == undefined) {
-      if (!span) {
-        span = document.createElement('span');
-        span.textContent = 'M';
-        span.style.margin = span.style.padding = '0 !important';
-        span.style.position = 'absolute !important';
-        span.style.left = '-99999px !important';
+      if (!div) {
+        div = document.createElement('div');
+        div.innerHTML = 'M';
+        div.style.margin = div.style.padding = '0 !important';
+        div.style.position = 'absolute !important';
+        div.style.left = '-99999px !important';
       }
-      span.style.font = font;
-      document.body.appendChild(span);
-      height = heights[font] = span.offsetHeight;
-      document.body.removeChild(span);
+      div.style.font = font;
+      document.body.appendChild(div);
+      height = heights[font] = div.offsetHeight;
+      document.body.removeChild(div);
     }
     return height;
   };

test/spec/ol/render/canvas/index.test.js

@@ -76,6 +76,14 @@ describe('ol.render.canvas', function() {
 
   });
 
+  describe('measureTextHeight', function() {
+    it('respects line-height', function() {
+      const height = render.measureTextHeight('12px/1.2 sans-serif');
+      expect(render.measureTextHeight('12px/2.4 sans-serif')).to.be.greaterThan(height);
+      expect(render.measureTextHeight('12px/0.1 sans-serif')).to.be.lessThan(height);
+    });
+  });
+
 
   describe('rotateAtOffset', function() {
     it('rotates a canvas at an offset point', function() {