30:T550,md`[Hershey Fonts](https://en.wikipedia.org/wiki/Hershey_fonts) are a collection of ${ renderTextSvg('vector fonts', { font, height:23+12, space: 8, color:'#a00' }) } developed in the 1960s. Unlike modern fonts, which rely on filling areas, Hershey Fonts are rendered as stroked paths. This property that makes Hershey Fonts ideal for "writing" text with pen plotters. When using these fonts for plotting by generating an SVG (for use in Inkscape), it would be inadequate to use them with SVG \`\`; a \`\` representation is required. Working with text in this way takes extra effort, but it also enables options that would otherwise be impossible to achieve. You can use Hershey fonts in your notebooks' SVGs by importing one or more or more variables from this notebook: import { renderTextArray, renderTextSvg, renderTextPaths, fonts } from '@meetamit/hershey-fonts'\` This notebook uses a javascript port of Hershey Fonts, [\`hersheytext\`](https://github.com/techninja/hersheytextjs), which provides the path data (the \`d\` attribute of \`\`). However, it seems that the \`hersheytext\` lib doesn't include letter widths. So this notebook appends those widths to the returned data (more on that later). ## Examples First, select a font:`31:T3b75,widths = ({"astrology":{"0":18,"1":15,"2":18,"3":18,"4":18,"5":19,"6":18,"7":19,"8":18,"9":18,"!":21,'"':15,"#":24,"$":14,"%":16,"&":25,"'":22,"(":11,")":10,"*":19,"+":16,",":5,"-":16,".":5,"/":20,":":19,";":17,"<":22,"=":17,">":22,"?":22,"@":22,"A":19,"B":19,"C":18,"D":19,"E":18,"F":18,"G":21,"H":22,"I":10,"J":14,"K":21,"L":17,"M":24,"N":22,"O":19,"P":19,"Q":19,"R":20,"S":17,"T":18,"U":22,"V":19,"W":23,"X":19,"Y":21,"Z":17,"[":21,"\\\\":14,"]":21,"^":21,"_":20,"\`":21,"a":21,"b":16,"c":15,"d":21,"e":15,"f":17,"g":18,"h":21,"i":12,"j":12,"k":19,"l":11,"m":34,"n":23,"o":17,"p":19,"q":18,"r":17,"s":15,"t":13,"u":23,"v":17,"w":27,"x":20,"y":20,"z":17,"{":23,"|":19,"}":21,"~":21},"cursive":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":6,'"':12,"#":18,"$":17,"%":21,"&":23,"'":2,"(":11,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":18,"B":21,"C":18,"D":21,"E":18,"F":21,"G":19,"H":24,"I":14,"J":13,"K":24,"L":18,"M":33,"N":24,"O":20,"P":24,"Q":19,"R":23,"S":17,"T":21,"U":24,"V":21,"W":30,"X":23,"Y":21,"Z":18,"[":11,"\\\\":14,"]":10,"^":16,"_":20,"\`":5,"a":16,"b":14,"c":11,"d":16,"e":10,"f":8,"g":15,"h":15,"i":7,"j":7,"k":14,"l":8,"m":25,"n":18,"o":14,"p":15,"q":15,"r":13,"s":11,"t":9,"u":15,"v":15,"w":21,"x":16,"y":15,"z":14,"{":9,"|":4,"}":10,"~":21},"cyrillic":{"0":17,"1":15,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":17,"!":6,'"':13,"#":18,"$":28,"%":20,"&":24,"'":5,"(":11,")":11,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":19,"B":19,"C":18,"D":22,"E":22,"F":22,"G":17,"H":29,"I":22,"J":21,"K":22,"L":23,"M":23,"N":22,"O":19,"P":22,"Q":31,"R":19,"S":18,"T":17,"U":28,"V":19,"W":31,"X":19,"Y":20,"Z":17,"[":18,"\\\\":14,"]":23,"^":20,"_":18,"\`":22,"a":18,"b":17,"c":18,"d":21,"e":20,"f":18,"g":16,"h":25,"i":20,"j":20,"k":18,"l":20,"m":21,"n":20,"o":17,"p":20,"q":29,"r":18,"s":16,"t":16,"u":26,"v":17,"w":29,"x":18,"y":17,"z":15,"{":16,"|":18,"}":19,"~":14},"futural":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":6,'"':12,"#":18,"$":17,"%":21,"&":23,"'":6,"(":11,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":17,"B":18,"C":18,"D":18,"E":17,"F":17,"G":18,"H":18,"I":4,"J":12,"K":18,"L":16,"M":20,"N":18,"O":19,"P":18,"Q":19,"R":18,"S":17,"T":15,"U":18,"V":17,"W":22,"X":17,"Y":17,"Z":17,"[":11,"\\\\":14,"]":10,"^":16,"_":18,"\`":5,"a":15,"b":16,"c":15,"d":15,"e":15,"f":10,"g":15,"h":15,"i":5,"j":7,"k":15,"l":4,"m":26,"n":15,"o":16,"p":16,"q":15,"r":12,"s":14,"t":10,"u":15,"v":14,"w":19,"x":14,"y":14,"z":14,"{":9,"|":4,"}":10,"~":21},"futuram":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":7,'"':15,"#":18,"$":16,"%":21,"&":22,"'":6,"(":11,")":10,"*":13,"+":21,",":7,"-":22,".":7,"/":21,":":7,";":7,"<":20,"=":21,">":20,"?":16,"@":24,"A":18,"B":17,"C":18,"D":18,"E":16,"F":16,"G":18,"H":18,"I":5,"J":13,"K":18,"L":16,"M":20,"N":18,"O":19,"P":17,"Q":19,"R":17,"S":17,"T":15,"U":18,"V":18,"W":24,"X":17,"Y":17,"Z":17,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":16,"b":17,"c":15,"d":16,"e":15,"f":11,"g":16,"h":16,"i":6,"j":6,"k":16,"l":5,"m":27,"n":16,"o":16,"p":17,"q":16,"r":13,"s":14,"t":9,"u":16,"v":14,"w":21,"x":15,"y":14,"z":15,"{":10,"|":4,"}":11,"~":21},"gothiceng":{"0":18,"1":14,"2":18,"3":16,"4":19,"5":18,"6":18,"7":18,"8":18,"9":18,"!":9,'"':15,"#":18,"$":17,"%":21,"&":23,"'":6,"(":10,")":11,"*":13,"+":21,",":7,"-":22,".":8,"/":21,":":8,";":8,"<":20,"=":21,">":20,"?":15,"@":24,"A":22,"B":21,"C":22,"D":19,"E":20,"F":23,"G":22,"H":21,"I":16,"J":17,"K":22,"L":20,"M":26,"N":24,"O":23,"P":18,"Q":23,"R":22,"S":21,"T":22,"U":22,"V":21,"W":23,"X":21,"Y":21,"Z":18,"[":11,"\\\\":14,"]":10,"^":19,"_":22,"\`":9,"a":15,"b":16,"c":14,"d":14,"e":13,"f":13,"g":16,"h":16,"i":8,"j":8,"k":15,"l":9,"m":24,"n":16,"o":16,"p":16,"q":16,"r":14,"s":13,"t":9,"u":16,"v":16,"w":24,"x":17,"y":16,"z":15,"{":9,"|":4,"}":10,"~":21},"gothicger":{"0":18,"1":14,"2":18,"3":16,"4":19,"5":18,"6":18,"7":18,"8":18,"9":18,"!":9,'"':15,"#":18,"$":17,"%":21,"&":23,"'":6,"(":10,")":11,"*":13,"+":21,",":7,"-":22,".":8,"/":21,":":8,";":8,"<":20,"=":21,">":20,"?":15,"@":24,"A":22,"B":23,"C":21,"D":23,"E":22,"F":22,"G":24,"H":22,"I":22,"J":22,"K":23,"L":20,"M":30,"N":25,"O":24,"P":23,"Q":26,"R":25,"S":24,"T":22,"U":20,"V":24,"W":29,"X":21,"Y":22,"Z":20,"[":11,"\\\\":14,"]":10,"^":19,"_":24,"\`":9,"a":16,"b":14,"c":11,"d":14,"e":11,"f":12,"g":14,"h":14,"i":9,"j":8,"k":12,"l":10,"m":25,"n":17,"o":14,"p":14,"q":14,"r":12,"s":12,"t":10,"u":17,"v":14,"w":22,"x":13,"y":14,"z":12,"{":9,"|":4,"}":10,"~":21},"gothicita":{"0":18,"1":14,"2":18,"3":16,"4":19,"5":18,"6":18,"7":18,"8":18,"9":18,"!":9,'"':15,"#":18,"$":17,"%":21,"&":23,"'":6,"(":10,")":11,"*":13,"+":21,",":7,"-":22,".":8,"/":21,":":8,";":8,"<":20,"=":21,">":20,"?":15,"@":24,"A":23,"B":23,"C":23,"D":23,"E":23,"F":23,"G":23,"H":23,"I":23,"J":23,"K":23,"L":23,"M":23,"N":23,"O":23,"P":23,"Q":23,"R":23,"S":23,"T":23,"U":23,"V":23,"W":23,"X":23,"Y":23,"Z":23,"[":11,"\\\\":14,"]":10,"^":19,"_":26,"\`":9,"a":14,"b":14,"c":11,"d":13,"e":12,"f":12,"g":13,"h":14,"i":7,"j":7,"k":15,"l":7,"m":23,"n":15,"o":13,"p":14,"q":14,"r":12,"s":13,"t":9,"u":16,"v":15,"w":23,"x":15,"y":15,"z":11,"{":9,"|":4,"}":10,"~":21},"greek":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":6,'"':12,"#":18,"$":17,"%":21,"&":23,"'":6,"(":11,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":17,"B":18,"C":17,"D":17,"E":17,"F":17,"G":16,"H":18,"I":4,"J":3,"K":18,"L":17,"M":20,"N":18,"O":19,"P":18,"Q":19,"R":18,"S":16,"T":15,"U":16,"V":11,"W":17,"X":16,"Y":20,"Z":17,"[":11,"\\\\":14,"]":10,"^":16,"_":18,"\`":5,"a":18,"b":16,"c":17,"d":15,"e":13,"f":19,"g":17,"h":16,"i":9,"j":18,"k":16,"l":14,"m":20,"n":16,"o":14,"p":20,"q":19,"r":15,"s":18,"t":18,"u":17,"v":22,"w":20,"x":14,"y":21,"z":14,"{":9,"|":4,"}":10,"~":21},"japanese":{"0":25,"1":25,"2":25,"3":25,"4":25,"5":25,"6":25,"7":25,"8":23,"9":25,"!":5,'"':24,"#":22,"$":23,"%":25,"&":25,"'":25,"(":25,")":25,"*":24,"+":25,",":25,"-":23,".":25,"/":25,":":25,";":5,"<":5,"=":5,">":5,"?":5,"@":5,"A":24,"B":24,"C":20,"D":24,"E":24,"F":24,"G":22,"H":19,"I":24,"J":21,"K":21,"L":23,"M":24,"N":24,"O":23,"P":24,"Q":23,"R":24,"S":24,"T":22,"U":24,"V":24,"W":24,"X":24,"Y":24,"Z":23,"[":24,"\\\\":24,"]":24,"^":23,"_":22,"\`":24,"a":24,"b":24,"c":23,"d":24,"e":24,"f":24,"g":24,"h":23,"i":22,"j":21,"k":22,"l":24,"m":22,"n":23,"o":24,"p":20,"q":24,"r":24,"s":24,"t":5,"u":5,"v":5,"w":5,"x":24,"y":23,"z":25,"{":27,"|":25,"}":26,"~":23},"markers":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"!":0,'"':0,"#":0,"$":0,"%":0,"&":0,"'":0,"(":0,")":0,"*":0,"+":0,",":0,"-":0,".":0,"/":0,":":0,";":0,"<":0,"=":0,">":0,"?":0,"@":0,"A":14,"B":12,"C":14,"D":12,"E":16,"F":12,"G":14,"H":10,"I":10,"J":8,"K":8,"L":10,"M":9,"N":10,"O":9,"P":28,"Q":0,"R":0,"S":0,"T":0,"U":0,"V":0,"W":0,"X":0,"Y":0,"Z":0,"[":0,"\\\\":0,"]":0,"^":0,"_":0,"\`":0,"a":14,"b":12,"c":14,"d":12,"e":16,"f":12,"g":14,"h":10,"i":10,"j":8,"k":8,"l":10,"m":9,"n":10,"o":9,"p":28,"q":0,"r":0,"s":0,"t":0,"u":0,"v":0,"w":0,"x":0,"y":0,"z":0,"{":0,"|":0,"}":0,"~":0},"mathlow":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":20,'"':20,"#":18,"$":3,"%":21,"&":20,"'":20,"(":11,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":31,";":28,"<":20,"=":22,">":20,"?":22,"@":22,"A":15,"B":16,"C":15,"D":15,"E":15,"F":10,"G":15,"H":15,"I":5,"J":7,"K":15,"L":4,"M":26,"N":15,"O":16,"P":16,"Q":15,"R":12,"S":14,"T":10,"U":15,"V":14,"W":19,"X":14,"Y":14,"Z":14,"[":11,"\\\\":14,"]":10,"^":21,"_":22,"\`":11,"a":17,"b":22,"c":33,"d":20,"e":20,"f":20,"g":20,"h":20,"i":22,"j":13,"k":22,"l":13,"m":16,"n":18,"o":33,"p":22,"q":27,"r":15,"s":14,"t":15,"u":14,"v":15,"w":17,"x":22,"y":10,"z":21,"{":9,"|":21,"}":10,"~":23},"mathupp":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":20,'"':20,"#":18,"$":3,"%":21,"&":20,"'":20,"(":11,")":10,"*":13,"+":22,",":6,"-":22,".":6,"/":20,":":31,";":28,"<":20,"=":22,">":20,"?":22,"@":22,"A":17,"B":18,"C":18,"D":18,"E":17,"F":17,"G":18,"H":18,"I":4,"J":12,"K":18,"L":16,"M":20,"N":18,"O":19,"P":18,"Q":19,"R":18,"S":17,"T":15,"U":18,"V":17,"W":22,"X":17,"Y":17,"Z":17,"[":11,"\\\\":14,"]":10,"^":21,"_":22,"\`":11,"a":13,"b":22,"c":33,"d":20,"e":20,"f":20,"g":20,"h":20,"i":22,"j":13,"k":22,"l":13,"m":16,"n":18,"o":33,"p":22,"q":27,"r":15,"s":14,"t":15,"u":14,"v":15,"w":17,"x":22,"y":10,"z":21,"{":10,"|":21,"}":9,"~":23},"meteorology":{"0":17,"1":11,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":16,"!":3,'"':4,"#":8,"$":10,"%":21,"&":10,"'":6,"(":10,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":10,";":12,"<":3,"=":4,">":4,"?":15,"@":24,"A":17,"B":18,"C":18,"D":18,"E":17,"F":17,"G":18,"H":18,"I":4,"J":12,"K":18,"L":16,"M":20,"N":18,"O":19,"P":18,"Q":19,"R":18,"S":17,"T":15,"U":18,"V":17,"W":22,"X":17,"Y":17,"Z":17,"[":11,"\\\\":14,"]":10,"^":17,"_":22,"\`":22,"a":15,"b":16,"c":15,"d":15,"e":15,"f":10,"g":15,"h":15,"i":5,"j":7,"k":15,"l":4,"m":26,"n":15,"o":16,"p":16,"q":15,"r":12,"s":14,"t":10,"u":15,"v":14,"w":19,"x":14,"y":14,"z":14,"{":9,"|":20,"}":10,"~":14},"music":{"0":17,"1":15,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":17,"!":6,'"':13,"#":13,"$":17,"%":17,"&":14,"'":13,"(":12,")":13,"*":23,"+":13,",":13,"-":13,".":13,"/":30,":":6,";":26,"<":30,"=":30,">":24,"?":24,"@":13,"A":16,"B":21,"C":20,"D":20,"E":21,"F":21,"G":20,"H":26,"I":13,"J":18,"K":25,"L":17,"M":27,"N":25,"O":19,"P":22,"Q":19,"R":21,"S":21,"T":21,"U":25,"V":22,"W":27,"X":23,"Y":23,"Z":21,"[":11,"\\\\":14,"]":10,"^":9,"_":22,"\`":9,"a":20,"b":16,"c":15,"d":20,"e":15,"f":16,"g":17,"h":20,"i":12,"j":11,"k":17,"l":10,"m":32,"n":22,"o":15,"p":18,"q":17,"r":16,"s":15,"t":12,"u":22,"v":17,"w":26,"x":18,"y":19,"z":17,"{":9,"|":4,"}":10,"~":21},"scriptc":{"0":18,"1":14,"2":18,"3":18,"4":18,"5":19,"6":18,"7":19,"8":18,"9":18,"!":9,'"':17,"#":18,"$":19,"%":21,"&":24,"'":9,"(":15,")":12,"*":15,"+":22,",":4,"-":22,".":4,"/":24,":":7,";":7,"<":20,"=":22,">":20,"?":19,"@":24,"A":19,"B":21,"C":18,"D":20,"E":17,"F":20,"G":19,"H":24,"I":16,"J":16,"K":24,"L":18,"M":26,"N":26,"O":18,"P":21,"Q":18,"R":23,"S":20,"T":19,"U":21,"V":22,"W":26,"X":22,"Y":22,"Z":22,"[":11,"\\\\":14,"]":10,"^":13,"_":16,"\`":9,"a":16,"b":14,"c":12,"d":16,"e":12,"f":9,"g":16,"h":15,"i":8,"j":8,"k":14,"l":8,"m":25,"n":18,"o":14,"p":15,"q":16,"r":14,"s":12,"t":8,"u":16,"v":15,"w":21,"x":16,"y":16,"z":13,"{":9,"|":4,"}":10,"~":21},"scripts":{"0":18,"1":14,"2":18,"3":18,"4":18,"5":19,"6":18,"7":19,"8":18,"9":18,"!":9,'"':17,"#":18,"$":19,"%":21,"&":24,"'":9,"(":15,")":12,"*":15,"+":22,",":4,"-":22,".":6,"/":24,":":7,";":7,"<":20,"=":22,">":20,"?":19,"@":24,"A":18,"B":21,"C":18,"D":21,"E":18,"F":21,"G":19,"H":24,"I":14,"J":13,"K":24,"L":18,"M":33,"N":24,"O":20,"P":24,"Q":19,"R":23,"S":17,"T":21,"U":24,"V":21,"W":30,"X":23,"Y":21,"Z":18,"[":11,"\\\\":14,"]":10,"^":13,"_":16,"\`":9,"a":16,"b":14,"c":11,"d":16,"e":10,"f":8,"g":15,"h":15,"i":7,"j":7,"k":14,"l":8,"m":25,"n":18,"o":14,"p":15,"q":15,"r":13,"s":11,"t":9,"u":15,"v":15,"w":21,"x":16,"y":15,"z":14,"{":9,"|":4,"}":10,"~":21},"symbolic":{"0":11,"1":11,"2":11,"3":28,"4":5,"5":5,"6":28,"7":14,"8":16,"9":14,"!":28,'"':28,"#":0,"$":28,"%":28,"&":24,"'":14,"(":0,")":14,"*":24,"+":14,",":10,"-":0,".":10,"/":11,":":16,";":16,"<":20,"=":16,">":20,"?":22,"@":20,"A":6,"B":5,"C":28,"D":28,"E":16,"F":28,"G":28,"H":14,"I":12,"J":14,"K":12,"L":16,"M":14,"N":10,"O":10,"P":8,"Q":8,"R":10,"S":9,"T":10,"U":9,"V":7,"W":18,"X":10,"Y":12,"Z":14,"[":18,"\\\\":14,"]":20,"^":12,"_":14,"\`":14,"a":22,"b":16,"c":16,"d":16,"e":16,"f":18,"g":20,"h":21,"i":13,"j":14,"k":14,"l":23,"m":20,"n":20,"o":21,"p":21,"q":13,"r":13,"s":13,"t":13,"u":35,"v":15,"w":19,"x":27,"y":23,"z":23,"{":34,"|":34,"}":12,"~":12},"timesg":{"0":17,"1":15,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":17,"!":6,'"':13,"#":18,"$":17,"%":21,"&":22,"'":5,"(":11,")":11,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":19,"B":19,"C":19,"D":18,"E":18,"F":18,"G":17,"H":22,"I":9,"J":3,"K":21,"L":19,"M":23,"N":21,"O":19,"P":22,"Q":19,"R":19,"S":18,"T":17,"U":17,"V":11,"W":19,"X":19,"Y":21,"Z":17,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":20,"b":18,"c":17,"d":16,"e":15,"f":19,"g":18,"h":18,"i":10,"j":18,"k":18,"l":18,"m":22,"n":18,"o":15,"p":20,"q":20,"r":16,"s":19,"t":18,"u":17,"v":22,"w":20,"x":15,"y":21,"z":17,"{":9,"|":4,"}":10,"~":21},"timesi":{"0":18,"1":14,"2":18,"3":18,"4":18,"5":19,"6":18,"7":19,"8":18,"9":18,"!":9,'"':17,"#":18,"$":19,"%":21,"&":22,"'":8,"(":15,")":12,"*":13,"+":22,",":4,"-":22,".":4,"/":20,":":7,";":7,"<":20,"=":22,">":20,"?":19,"@":24,"A":16,"B":21,"C":20,"D":20,"E":21,"F":21,"G":20,"H":26,"I":13,"J":18,"K":25,"L":17,"M":27,"N":25,"O":19,"P":22,"Q":19,"R":21,"S":21,"T":21,"U":25,"V":22,"W":27,"X":23,"Y":23,"Z":21,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":20,"b":16,"c":15,"d":20,"e":15,"f":16,"g":17,"h":20,"i":12,"j":11,"k":17,"l":10,"m":32,"n":22,"o":15,"p":18,"q":17,"r":16,"s":15,"t":12,"u":22,"v":17,"w":26,"x":18,"y":19,"z":17,"{":9,"|":4,"}":10,"~":21},"timesib":{"0":18,"1":15,"2":18,"3":18,"4":18,"5":19,"6":18,"7":19,"8":18,"9":18,"!":10,'"':17,"#":18,"$":19,"%":21,"&":24,"'":8,"(":16,")":13,"*":15,"+":21,",":5,"-":22,".":5,"/":21,":":8,";":8,"<":20,"=":21,">":20,"?":19,"@":24,"A":16,"B":21,"C":20,"D":20,"E":21,"F":21,"G":20,"H":26,"I":14,"J":19,"K":25,"L":17,"M":28,"N":25,"O":19,"P":22,"Q":19,"R":21,"S":21,"T":22,"U":25,"V":22,"W":27,"X":23,"Y":24,"Z":21,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":21,"b":16,"c":15,"d":21,"e":15,"f":17,"g":18,"h":21,"i":12,"j":12,"k":19,"l":11,"m":34,"n":23,"o":17,"p":19,"q":18,"r":17,"s":15,"t":13,"u":23,"v":17,"w":27,"x":20,"y":20,"z":17,"{":9,"|":4,"}":10,"~":21},"timesr":{"0":17,"1":15,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":17,"!":6,'"':15,"#":18,"$":17,"%":21,"&":22,"'":5,"(":11,")":10,"*":13,"+":22,",":5,"-":22,".":5,"/":20,":":5,";":5,"<":20,"=":22,">":20,"?":15,"@":24,"A":19,"B":19,"C":18,"D":19,"E":18,"F":18,"G":21,"H":22,"I":9,"J":13,"K":21,"L":17,"M":23,"N":21,"O":19,"P":19,"Q":19,"R":20,"S":17,"T":17,"U":22,"V":19,"W":23,"X":19,"Y":20,"Z":17,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":18,"b":18,"c":16,"d":19,"e":16,"f":11,"g":16,"h":20,"i":9,"j":7,"k":19,"l":9,"m":31,"n":20,"o":17,"p":18,"q":19,"r":15,"s":14,"t":13,"u":20,"v":17,"w":23,"x":18,"y":18,"z":15,"{":9,"|":4,"}":10,"~":21},"timesrb":{"0":17,"1":15,"2":17,"3":17,"4":18,"5":17,"6":17,"7":17,"8":17,"9":17,"!":7,'"':15,"#":18,"$":17,"%":21,"&":23,"'":6,"(":10,")":11,"*":13,"+":21,",":7,"-":22,".":7,"/":21,":":7,";":7,"<":20,"=":21,">":20,"?":16,"@":24,"A":19,"B":19,"C":18,"D":19,"E":18,"F":18,"G":21,"H":22,"I":10,"J":14,"K":21,"L":17,"M":24,"N":22,"O":19,"P":19,"Q":19,"R":20,"S":17,"T":18,"U":22,"V":19,"W":23,"X":19,"Y":21,"Z":17,"[":11,"\\\\":14,"]":10,"^":19,"_":20,"\`":9,"a":18,"b":18,"c":16,"d":19,"e":16,"f":13,"g":17,"h":21,"i":10,"j":9,"k":20,"l":10,"m":32,"n":21,"o":17,"p":18,"q":19,"r":15,"s":14,"t":14,"u":21,"v":17,"w":23,"x":18,"y":18,"z":15,"{":9,"|":4,"}":10,"~":21}})32:T635,function renderTextArray(text, options={}) { let array = ht.renderTextArray(text, options) const scale = (options.size || 24) / 24 let x = 0, y = 0, xMax = 0 function widthTillWhitespace(letters) { const remainder = letters.slice(0, letters.findIndex(l => !l.d)).map(l => l.type).join('') if (!remainder.length) return 0 return renderTextArray( remainder, { ...options, wrapWidth: false } ).width } array.forEach((d, i) => { let w = 0 if (options.charWidth) { w = options.charWidth } else if (d.type === 'space') { w = options.space || 10} else if (d.type === 'newline') { w = 0 } else if (widths[options.font]) { w = widths[options.font][d.type] } if ( d.type === 'newline' || // (options.wrapWidth && (x + w > options.wrapWidth)) || (options.wrapWidth && (x + widthTillWhitespace(array.slice(i)) > options.wrapWidth)) ) { x = 0 y += nativeLineHeight * (options.lineHeight || 1) } if (d.type === 'space' && x === 0 && y > 0) { w = 0 } w *= scale d.x = x d.y = y d.h = nativeLineHeight * scale d.w = w d.k = scale x += w if (w > 0 && options.gap) { x += options.gap } xMax = Math.max(xMax, x) }) if (options.anchor === 'right') { array = array.map(d => { d.x = d.x - xMax return d }) } else if (options.anchor === 'middle') { array = array.map(d => { d.x = d.x - xMax/2 return d }) } array.width = xMax array.height = array[array.length - 1].y + array[array.length - 1].h return array }33:T767,measuredWidths = { const _detected = mutable detected const fonts = Object.keys(ht.fonts).filter(f => !_detected[f] || f === font) const canvas = d3.select(DOM.svg(width)) for (let font of fonts) { const text = d3.range(0, 94).map(i => String.fromCharCode(i+33)).join('') const letters = ht.renderTextArray(text, { font }) _detected[font] = {} const scl = 4 yield canvas.node() canvas.select('g').remove() const root = canvas.append('g') .attr('transform', `translate(10 0) scale(${scl})`) for (let l, g, d, bb, a=0, y=0, i=0; i < letters.length; i++) { l = letters[i] g = root.append('g') .attr('transform', `translate(${a},${y})`) const path = g.append('path') .attr('d', l.d) .attr('fill', 'none') .attr('stroke','black') .attr('stroke-width', 1/scl) .attr('stroke-linejoin','round') .attr('stroke-linecap','round') path.append('title').text(`${l.type} (${l.type.charCodeAt(0)})`) bb = path.node().getBBox() d = bb.width + bb.x g.selectAll('rect') .data([d, /*l.o*/]) .enter() .insert('rect', ':first-child') .attr('width', v => v) .attr('y', (v, i) => i === 0 ? bb.y : 0) .attr('height', (v, i) => i === 0 ? bb.height : 35) .attr('fill', 'none') .attr('stroke', (v, i) => `rgba(${i === 0 ? 255 : 0}, 0, ${i === 1 ? 255 : 0}, .3)`) .attr('stroke-width', 1/scl) g.insert('line', ':first-child') .attr('y2', 35) .attr('stroke','#999') .attr('stroke-width', 1/scl) _detected[font][l.type] = d a += d + 4 if (a > (width - 60) / scl) { a = 0 y += 40 } canvas.attr('height', (y+40)*scl) } yield canvas.node() mutable detected = _detected } yield canvas.node() return canvas.node() }34:[] 2e:{"title":"Hershey Fonts","cells":[{"id":800,"value":"md`# Hershey Fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"renderTextSvg('It\\'s text, for pen plotters!', { font, color: '#000099', weight: 2, size: 36 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"viewof font = {\n const select = DOM.select(Object.keys(fonts))\n select.value = 'cursive' // default\n return select\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"viewof gap = slider({\n title: 'Letter Spacing',\n min: -1,\n max: 15,\n step: .25,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"viewof lineHeight = slider({\n title: 'Line Height',\n min: .5,\n max: 2.5,\n step: .1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"viewof space = slider({\n title: 'Space Size',\n min: .5,\n max: 20,\n step: .5,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`You can use the function \\`renderTextSvg()\\` to render an SVG of the text.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"renderTextSvg(\n 'Lorem ipsum dolor sit amet, consectetur adipiscing. Maecenas ornare ligula quis justo.', \n { wrapWidth: 450, font, gap, lineHeight, space }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"md`One level lower, the function \\`renderTextPaths()\\` renders an array of SVG \\`\\` nodes for you:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"md`Or use \\`renderTextInto\\` to append the paths into an svg that you supply:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"{\n const el = svg``\n renderTextInto(el.children[0], 'Full House', { font, color: '#7c0000' })\n return el\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"renderTextArray('Lorem Ipsum', { font: 'cursive' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`Or use \\`renderTextArray\\` to obtain the underlying data, from which you can create your own SVG:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`## Under The Hood\n\nThe font outlines were provided by the \\`hersheytext\\` library. The letter widths added by this notebook were measured once, using \\`getBBox()\\`, and the results are hardcoded as variable *widths* below. Further down in this notebook is the cell that measures these widths, and its output is the very string that was copy-pasted into the hardcoded *widths* cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`The implementation of the two text rendering functions demo\\`d above:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"function renderTextPaths(text, options) {\n const letters = renderTextArray(text, options)\n const svgLetters = []\n for (let l, i=0; i < letters.length; i++) {\n l = letters[i]\n l.d && svgLetters.push(svg``)\n }\n svgLetters.width = letters.width\n svgLetters.height = letters.height\n return svgLetters\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"function renderTextInto(g, text, options) {\n renderTextPaths(text, options).forEach(e => g.appendChild(e))\n return g\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"function renderTextSvg(text, options={}) {\n const svgLetters = renderTextPaths(text, { font, gap: 1, ...options })\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"nativeLineHeight = 34","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`## Measurement\n\nThe output below is used to measure the letters. The red outlines are the bounding boxes detected. Note that the letters' outlines have gaps on the left, because they're not aligned to the zero x-coordinate. The bounding box's right-most coordinate (i.e. width + x) is what we store as the hardcoded *widths*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"mutable detected = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`### This is the generated text that was copy-pasted into the *widths* variable\n\n

widths = (${JSON.stringify(detected).replace(/\\\"\\\\\\\"\\\"/g, `'\"'`)})

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"fonts = ht.fonts","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"ht = require('https://bundle.run/hersheytext@0.5.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}