Refine calculation for unicodes

lib/calc-text-width.js

@@ -2,18 +2,20 @@ const widthsVerdana11 = require('./widths-verdana-11.json')
 const astralRegex = require('./unicode-astral-regex.js')
 
 function calcWidth (charWidthTable) {
-  const SCALE = 10
+  const SCALE = 10 // Prevent results like 60.599999999999994
   const widthTable = charWidthTable.map(w => Math.round(w * SCALE))
-  return function (text, unicode) {
+  widthTable[64] = widthTable[64] + 2 // Slightly increase width of "@" by 0.2px
+
+  return function (text, containsEmoji) {
     typeAssert(typeof text === 'string', 'Input must be string')
-    if (unicode) text = text.match(astralRegex)
+    if (containsEmoji) text = text.match(astralRegex)
 
     let total = 0
+    let code = 0
     let i = text.length
-    let charCode = 0
     while (i--) {
-      charCode = text[i].charCodeAt()
+      code = text[i].charCodeAt()
-      total += widthTable[charCode < 127 ? charCode : 64] // "@" for overflows
+      total += widthTable[code < 127 ? code : 64] // Width as "@" for overflows
     }
     return total / SCALE
   }

lib/index.js

@@ -4,8 +4,9 @@ const colorPresets = require('./color-presets.js')
 module.exports = function ({subject, status, color, style, unicode}) {
   color = colorPresets[color] || color || colorPresets['blue']
 
+  const stTextWidth = calcWidth(status, unicode)
   const sbRectWidth = calcWidth(subject, unicode) + 10
-  const stRectWidth = calcWidth(status, unicode) + 10
+  const stRectWidth = stTextWidth + 10
   const width = sbRectWidth + stRectWidth
 
   if (style === 'flat') {
@@ -18,8 +19,8 @@ module.exports = function ({subject, status, color, style, unicode}) {
         <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
           <text x="6.1" y="14.8" fill="#000" opacity="0.1">${subject}</text>
           <text x="5.1" y="13.8">${subject}</text>
-          <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.1">${status}</text>
+          <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.1" textLength="${stTextWidth}">${status}</text>
-          <text x="${sbRectWidth + 4.5}" y="13.8">${status}</text>
+          <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
         </g>
       </svg>
     `
@@ -40,8 +41,8 @@ module.exports = function ({subject, status, color, style, unicode}) {
       <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
         <text x="6.4" y="14.8" fill="#000" opacity="0.25">${subject}</text>
         <text x="5.4" y="13.8">${subject}</text>
-        <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.25" textLength="${stRectWidth - 10}">${status}</text>
+        <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.25" textLength="${stTextWidth}">${status}</text>
-        <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stRectWidth - 10}">${status}</text>
+        <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
       </g>
     </svg>
   `