Better SVG dimensions to match built-in drawing - #330

Author: metafloor

LICENSE

@@ -21,4 +21,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
-

LICENSE.INCONSOLATA

@@ -22,7 +22,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
+fonts, including any derivative works, can be bundled, embedded,
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The

README.md

@@ -14,7 +14,7 @@ or as SVG (all platforms).
 
 ## Status 
 
-* Current bwip-js version is 4.3.0 (2024-03-12)
+* Current bwip-js version is 4.3.1 (2024-03-16)
 * Current BWIPP version is 2024-01-03
 * Node.js compatibility: 0.12+
 * Browser compatibility: Edge, Firefox, Chrome

bin/bwip-js.js

@@ -60,7 +60,7 @@ function loadfont(spec) {
 }
 
 var optlist = [
-    { name: 'help', type: 'boolean', 
+    { name: 'help', type: 'boolean',
       desc: 'Displays this help message.' },
     { name: 'version', type: 'boolean',
       desc: 'Displays the bwip-js and BWIPP version strings.' },
@@ -131,20 +131,23 @@ var optlist = [
             'non-data function characters can be specified by escaped combinations such\n' +
             'as ^FNC1, ^FNC4 and ^SFT.' },
     { name: 'height', type: 'float',
-      desc: 'Height of longest bar, in millimetermillimeters.' },
+      desc: 'Height of longest bar, in millimeters.' },
     { name: 'width', type: 'float',
-      desc: 'Stretch the symbol to precisely this width, in millimeters.' },
+      desc: 'Stretch the symbol to approximately this width, in millimeters.\n' +
+            'Not recommended unless scale is at least 5.' },
     { name: 'inkspread', type: 'float',
       desc: 'Amount by which to reduce the bar widths to compensate for inkspread,\n' +
-            'in points.' },
+            'in points. Not recommended unless scale is at least 5.' },
     { name: 'inkspreadh', type: 'float',
-      desc: 'For matrix barcodes, the amount by which the reduce the width of dark\n' +
-            'modules to compensate for inkspread, in points.\n\n' +
+      desc: 'For matrix barcodes, the amount by which to reduce the width of dark\n' +
+            'modules to compensate for inkspread, in points.\n' +
+            'Not recommended unless scale is at least 5.\n\n' +
             'Note: inkspreadh is most useful for stacked-linear type barcodes such as\n' +
             'PDF417 and Codablock F.' },
     { name: 'inkspreadv', type: 'float',
-      desc: 'For matrix barcodes, the amount by which the reduce the height of dark\n' +
-            'modules to compensate for inkspread, in points.' },
+      desc: 'For matrix barcodes, the amount by which to reduce the height of dark\n' +
+            'modules to compensate for inkspread, in points.\n' +
+            'Not recommended unless scale is at least 5.' },
     { name: 'dotty', type: 'boolean',
       desc: 'For matrix barcodes, render the modules as dots rather than squares.\n' +
             'The dot radius can be adjusted using the inkspread option.' },
@@ -179,15 +182,15 @@ var optlist = [
     { name: 'borderbottom', type: 'int',
       desc: 'Bottom margin gap of the border, in points.' },
     { name: 'barcolor', type: 'string',
-      desc: 'Color of the bars, either as a hex RRGGBB value or a hex CCMMYYKK value.' },
+      desc: 'Color of the bars, either as a hex RGB or RRGGBB value or a hex CCMMYYKK value.' },
     { name: 'backgroundcolor', type: 'string',
-      desc: 'Color of a the image background, either as a hex RRGGBB value or a\n' +
+      desc: 'Color of the image background, either as a hex RGB or RRGGBB value or a\n' +
             'hex CCMMYYKK value.  The default is a transparent background.' },
     { name: 'bordercolor', type: 'string',
-      desc: 'Color of the border, either as a hex RRGGBB value or a hex CCMMYYKK value.\n' +
+      desc: 'Color of the border, either as a hex RGB or RRGGBB value or a hex CCMMYYKK value.\n' +
             'You must specify --showborder for this setting to take effect.' },
     { name: 'textcolor', type: 'string',
-      desc: 'Color of the text, either as a hex RRGGBB value or a hex CCMMYYKK value.' },
+      desc: 'Color of the text, either as a hex RGB or RRGGBB value or a hex CCMMYYKK value.' },
     { name: 'addontextfont', type: 'string',
       desc: 'The font name to use for the add-on text in ISBN, ISMN, and ISSN barcodes.' },
     { name: 'addontextsize', type: 'int',
@@ -211,7 +214,7 @@ var optlist = [
     { name: 'guardrightypos', type: 'int',
       desc: 'Vertical position of the guard symbols on the right, in points.' },
 ];
-var optmap = optlist.reduce(function(map, elt) { map[elt.name] = elt; return map; }, {}); 
+var optmap = optlist.reduce(function(map, elt) { map[elt.name] = elt; return map; }, {});
 var opts = {};
 var argv = process.argv;
 var outfile;

demo.html

@@ -178,7 +178,7 @@
                 document.getElementById('output').textContent = msg;
             } else if (e.stack) {
                 // GC includes the message in the stack.  FF does not.
-                document.getElementById('output').textContent = 
+                document.getElementById('output').textContent =
                         (e.stack.indexOf(msg) == -1 ? msg + '\n' : '') + e.stack;
             } else {
                 document.getElementById('output').textContent = msg;
@@ -198,7 +198,7 @@
                 document.getElementById('output').textContent = msg;
             } else if (e.stack) {
                 // GC includes the message in the stack.  FF does not.
-                document.getElementById('output').textContent = 
+                document.getElementById('output').textContent =
                         (e.stack.indexOf(msg) == -1 ? msg + '\n' : '') + e.stack;
             } else {
                 document.getElementById('output').textContent = msg;
@@ -249,7 +249,7 @@
     var scaleX = +document.getElementById('scaleX').value || 2;
     var scaleY = +document.getElementById('scaleY').value || scaleX;
 
-    var url = 'http://bwipjs-api.metafloor.com/?bcid=' + elt.sym + 
+    var url = 'http://bwipjs-api.metafloor.com/?bcid=' + elt.sym +
                 '&text=' + encodeURIComponent(text) +
                 (alttext ? '&alttext=' + encodeURIComponent(alttext) : '') +
                 (options ? '&' + options.replace(/ +/g, '&') : '') +

dist/bwip-js-gen.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for bwip-js  4.3.0 (2024-03-12)
+// Type definitions for bwip-js  4.3.1 (2024-03-16)
 //
 // THIS DEFINITION FILE IS MACHINE GENERATED - DO NOT EDIT
 //
@@ -135,7 +135,7 @@ declare namespace BwipJs {
     ):
         | Array<{ bbs: number[]; bhs: number[]; sbs: number[] }>
         | Array<{ pixs: number[]; pixx: number; pixy: number; height: number; width: number }>;
-        
+
     export const BWIPP_VERSION: string;
     export const BWIPJS_VERSION: string;
 
@@ -182,7 +182,7 @@ declare namespace BwipJs {
     }
     export function toSVG(opts: RenderOptions): string;
     export function drawingSVG(): DrawingContext<string>;
-    
+
     // platform-specific exports
     export function auspost<T>(opts: RenderOptions, drawing: DrawingContext<Promise<T>>): Promise<T>;
     export function auspost<T>(opts: RenderOptions, drawing: DrawingContext<T>): T;

dist/bwip-js-gen.mjs

@@ -33,7 +33,7 @@
 import { bwipp_auspost,bwipp_azteccode,bwipp_azteccodecompact,bwipp_aztecrune,bwipp_bc412,bwipp_channelcode,bwipp_codablockf,bwipp_code11,bwipp_code128,bwipp_code16k,bwipp_code2of5,bwipp_code32,bwipp_code39,bwipp_code39ext,bwipp_code49,bwipp_code93,bwipp_code93ext,bwipp_codeone,bwipp_coop2of5,bwipp_daft,bwipp_databarexpanded,bwipp_databarexpandedcomposite,bwipp_databarexpandedstacked,bwipp_databarexpandedstackedcomposite,bwipp_databarlimited,bwipp_databarlimitedcomposite,bwipp_databaromni,bwipp_databaromnicomposite,bwipp_databarstacked,bwipp_databarstackedcomposite,bwipp_databarstackedomni,bwipp_databarstackedomnicomposite,bwipp_databartruncated,bwipp_databartruncatedcomposite,bwipp_datalogic2of5,bwipp_datamatrix,bwipp_datamatrixrectangular,bwipp_datamatrixrectangularextension,bwipp_dotcode,bwipp_ean13,bwipp_ean13composite,bwipp_ean14,bwipp_ean2,bwipp_ean5,bwipp_ean8,bwipp_ean8composite,bwipp_flattermarken,bwipp_gs1_128,bwipp_gs1_128composite,bwipp_gs1_cc,bwipp_gs1datamatrix,bwipp_gs1datamatrixrectangular,bwipp_gs1dldatamatrix,bwipp_gs1dlqrcode,bwipp_gs1dotcode,bwipp_gs1northamericancoupon,bwipp_gs1qrcode,bwipp_hanxin,bwipp_hibcazteccode,bwipp_hibccodablockf,bwipp_hibccode128,bwipp_hibccode39,bwipp_hibcdatamatrix,bwipp_hibcdatamatrixrectangular,bwipp_hibcmicropdf417,bwipp_hibcpdf417,bwipp_hibcqrcode,bwipp_iata2of5,bwipp_identcode,bwipp_industrial2of5,bwipp_interleaved2of5,bwipp_isbn,bwipp_ismn,bwipp_issn,bwipp_itf14,bwipp_jabcode,bwipp_japanpost,bwipp_kix,bwipp_leitcode,bwipp_mailmark,bwipp_mands,bwipp_matrix2of5,bwipp_maxicode,bwipp_micropdf417,bwipp_microqrcode,bwipp_msi,bwipp_onecode,bwipp_pdf417,bwipp_pdf417compact,bwipp_pharmacode,bwipp_pharmacode2,bwipp_planet,bwipp_plessey,bwipp_posicode,bwipp_postnet,bwipp_pzn,bwipp_qrcode,bwipp_rationalizedCodabar,bwipp_raw,bwipp_rectangularmicroqrcode,bwipp_royalmail,bwipp_sscc18,bwipp_swissqrcode,bwipp_symbol,bwipp_telepen,bwipp_telepennumeric,bwipp_ultracode,bwipp_upca,bwipp_upcacomposite,bwipp_upce,bwipp_upcecomposite,bwipp_lookup,bwipp_encode,BWIPP_VERSION } from './bwipp.mjs';
 
 // exports.js
-const BWIPJS_VERSION = '4.3.0 (2024-03-12)';
+const BWIPJS_VERSION = '4.3.1 (2024-03-16)';
 
 
 // bwipjs.toSVG(options)
@@ -338,7 +338,7 @@ BWIPJS.prototype.restore = function() {
 //  coordinates corresponding to the current point according to the current
 //  value of the CTM. Thus, if a current point is set and then the CTM is
 //  changed, the coordinates returned by currentpoint will be different
-//  from those that were originally specified for the point. 
+//  from those that were originally specified for the point.
 BWIPJS.prototype.currpos = function() {
     return { x:(this.g_posx-this.g_tdx)/this.g_tsx,
              y:(this.g_posy-this.g_tdy)/this.g_tsy
@@ -392,7 +392,7 @@ BWIPJS.prototype.setcolor = function(s) {
         return;
     }
     if (!/^(?:#?[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?|[0-9a-fA-F]{8})$/.test(s)) {
-        throw new Error('bwip-js: invalid color: ' + s); 
+        throw new Error('bwip-js: invalid color: ' + s);
     }
     if (s[0] == '#') {
         s = s.substr(1);
@@ -836,9 +836,9 @@ BWIPJS.prototype.maxicode = function(pix) {
             y *= tsy * 3;
             y += tsy * 2 - h/2;
             y = y|0;
-            
+
             // Build bottom up so the drawing is top-down.
-            var pts = [ [ x-0.5, y-- ] ]; 
+            var pts = [ [ x-0.5, y-- ] ];
             y -= qh-1;
             pts.push([x-1-w2, y--]);
             y -= vh;
@@ -1117,7 +1117,7 @@ function DrawingBuiltin() {
 
         // Polygons are used to draw the connected regions in a 2d barcode.
         // These will always be unstroked, filled, orthogonal shapes.
-        // 
+        //
         // You will see a series of polygon() calls, followed by a fill().
         polygon : function(pts) {
             var npts = pts.length;
@@ -1410,7 +1410,7 @@ function DrawingBuiltin() {
         for (var y = left.min, max = left.length-1; y <= max; y++) {
             addPoint(left[y], y);
         }
-        // The points we calculated are "inside".  The fill algorithm excludes 
+        // The points we calculated are "inside".  The fill algorithm excludes
         // right edges, so +1 on each x.
         for (var y = right.min, max = right.length-1; y <= max; y++) {
             addPoint(right[y]+1, y);
@@ -1448,7 +1448,7 @@ function DrawingBuiltin() {
         for (var n = 0, npts = pts.length; n < npts; n++) {
             var xn = pts[n];
             if (xn > x) {
-                return !wn; 
+                return !wn;
             } else if (xn == x) {
                 return wn;
             }
@@ -1524,15 +1524,19 @@ function DrawingSVG() {
             var width = 0;
             var ascent = 0;
             var descent = 0;
-            for (var i = 0; i < str.length; i++) {
+            for (var i = 0, l = str.length; i < l; i++) {
                 var ch = str.charCodeAt(i);
-                var glyph = FontLib.getpaths(fontid, ch, fwidth, fheight);
+                var glyph = FontLib.getglyph(fontid, ch, fwidth, fheight);
                 if (!glyph) {
                     continue;
                 }
-                ascent  = Math.max(ascent, glyph.ascent);
-                descent = Math.max(descent, -glyph.descent);
-                width  += glyph.advance;
+                ascent  = Math.max(ascent, glyph.top);
+                descent = Math.max(descent, glyph.height - glyph.top);
+                if (i == l-1) {
+                    width += glyph.left + glyph.width;
+                } else {
+                    width += glyph.advance;
+                }
             }
             return { width, ascent, descent };
         },
@@ -1592,6 +1596,12 @@ function DrawingSVG() {
                     y1 += 0.5;
                 }
             }
+            // The svg path does not include the start pixel, but the bwip-js drawing does.
+            if (x0 == x1) {
+                y0++;
+            } else if (y0 == y1) {
+                x0++;
+            }
 
             // Group together all lines of the same width and emit as single paths.
             // Dramatically reduces resulting text size.
@@ -1720,7 +1730,9 @@ function DrawingSVG() {
                     // Close the shape
                     path += 'Z';
                 }
-                x += glyph.advance + dx;
+                // getglyph() provides slightly different metrics than getpaths().  Keep
+                // it consistent with the built-in drawing.
+                x += FontLib.getglyph(fontid, ch, fwidth, fheight).advance + dx;
             }
             if (path) {
                 svg += '<path d="' + path + '" fill="#' + rgb + '" />\n';
@@ -1837,7 +1849,7 @@ var FontLib = (function() {
         }
 
         // In the cache?
-        var cachekey = '' + fontid + 'c' + charcode + 'w' + width + 'h' + height; 
+        var cachekey = '' + fontid + 'c' + charcode + 'w' + width + 'h' + height;
         var glyph = glyphcache[cachekey];
         if (glyph) {
             // Unthread from the MRU
@@ -1850,7 +1862,7 @@ var FontLib = (function() {
             glyph.next = sntl.next;
             glyph.prev = sntl;
             sntl.next = glyph;
-            
+
             return glyph;
         }
 
@@ -1859,7 +1871,7 @@ var FontLib = (function() {
                                                    height * font.bwipjs_multy / 100) ||
                     STBTT.GetGlyph(font, 0, width * font.bwipjs_multx / 100,
                                                    height * font.bwipjs_multy / 100);
-        
+
         glyph.bytes = glyph.pixels;
         glyph.cachekey = cachekey;
         glyph.offset = 0;
@@ -1928,7 +1940,6 @@ var FontLib = (function() {
 function LoadFont() {
     return FontLib.loadFont.apply(FontLib, Array.prototype.slice.call(arguments));
 }
-
 // bwip-js/stb_trutype.js
 //
 // JavaScript implementation of stb_truetype.h @ https://github.com/nothings/stb.
@@ -3876,7 +3887,7 @@ function toUint8Array(data) {
     }
     throw new ReferenceError("data must be a binary or base64 encoded string or Uint8Array");
 }
-toUint8Array.b64map = (function() { 
+toUint8Array.b64map = (function() {
     var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
     var map = {};
     for (var i = 0; i < 64; i++) {

dist/bwip-js-min.js

@@ -1,4 +1,4 @@
-// Type definitions for bwip-js  4.3.0 (2024-03-12)
+// Type definitions for bwip-js  4.3.1 (2024-03-16)
 //
 // THIS DEFINITION FILE IS MACHINE GENERATED - DO NOT EDIT
 //
@@ -139,7 +139,7 @@ declare namespace BwipJs {
     ):
         | Array<{ bbs: number[]; bhs: number[]; sbs: number[] }>
         | Array<{ pixs: number[]; pixx: number; pixy: number; height: number; width: number }>;
-        
+
     export const BWIPP_VERSION: string;
     export const BWIPJS_VERSION: string;
 
@@ -186,7 +186,7 @@ declare namespace BwipJs {
     }
     export function toSVG(opts: RenderOptions): string;
     export function drawingSVG(): DrawingContext<string>;
-    
+
     // platform-specific exports
     export type ToBufferCallback = (err: string | Error, png: Buffer) => void;
     export function toBuffer(opts: RenderOptions, callback: ToBufferCallback): void;