add lineHeight in ems and letterSpacing in px to text symbolizer [#53, …

…#49]
protomaps · Sep 23, 2021 · 17e4a3c · 17e4a3c
1 parent ba2c159
commit 17e4a3c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/default_style/style.ts b/src/default_style/style.ts
@@ -253,6 +253,7 @@ export const labelRules = (params:DefaultStyleParams,shade:string,language1:stri
             symbolizer: languageStack(new CenteredTextSymbolizer({
                 label_props:nametags,
                 fill:params.countryLabel,
+                lineHeight:1.5,
                 font:(z:number,f:Feature) => {
                     if (z < 6) return "200 14px sans-serif"
                     return "200 20px sans-serif"

diff --git a/src/symbolizer.ts b/src/symbolizer.ts
@@ -425,6 +425,8 @@ export class TextSymbolizer implements LabelSymbolizer {
     fill: ColorAttr
     stroke:ColorAttr 
     width: NumberAttr
+    lineHeight: NumberAttr // in ems
+    letterSpacing: NumberAttr // in px
     maxLineCodeUnits: number
 
     constructor(options:any) {
@@ -434,6 +436,8 @@ export class TextSymbolizer implements LabelSymbolizer {
         this.fill = new ColorAttr(options.fill)
         this.stroke = new ColorAttr(options.stroke)
         this.width = new NumberAttr(options.width,0)
+        this.lineHeight = new NumberAttr(options.lineHeight,1)
+        this.letterSpacing = new NumberAttr(options.letterSpacing,0)
         this.maxLineCodeUnits = options.maxLineChars || 15
     }
 
@@ -443,6 +447,8 @@ export class TextSymbolizer implements LabelSymbolizer {
         let font = this.font.get(layout.zoom,feature)
         layout.scratch.font = font
 
+        let letterSpacing = this.letterSpacing.get(layout.zoom,feature)
+
         // line breaking
         let lines = linebreak(property,this.maxLineCodeUnits)
         var longestLine
@@ -455,11 +461,11 @@ export class TextSymbolizer implements LabelSymbolizer {
         }
 
         let metrics = layout.scratch.measureText(longestLine)
-        let width = metrics.width
+        let width = metrics.width + (letterSpacing * (longestLineLen-1))
 
         let ascent = metrics.actualBoundingBoxAscent
         let descent = metrics.actualBoundingBoxDescent
-        let lineHeight = ascent + descent
+        let lineHeight = (ascent + descent) * this.lineHeight.get(layout.zoom,feature)
 
         let a = new Point(geom[0][0].x,geom[0][0].y)
         let bbox = {
@@ -482,9 +488,25 @@ export class TextSymbolizer implements LabelSymbolizer {
                 if (textStrokeWidth) {
                     ctx.lineWidth = textStrokeWidth * 2 // centered stroke
                     ctx.strokeStyle = this.stroke.get(layout.zoom,feature)
-                    ctx.strokeText(line,0,y)
+                    if (letterSpacing > 0) {
+                        var xPos = 0
+                        for (var letter of line) {
+                            ctx.strokeText(letter,xPos,y)
+                            xPos += ctx.measureText(letter).width + letterSpacing
+                        }
+                    } else {
+                        ctx.strokeText(line,0,y)
+                    }
+                }
+                if (letterSpacing > 0) {
+                    var xPos = 0
+                    for (var letter of line) {
+                        ctx.fillText(letter,xPos,y)
+                        xPos += ctx.measureText(letter).width + letterSpacing
+                    }
+                } else {
+                    ctx.fillText(line,0,y)
                 }
-                ctx.fillText(line,0,y)
                 y += lineHeight
             }
         }