1664965920
opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts.
It gives you access to the letterforms of text from the browser or Node.js. See https://opentype.js.org/ for a live demo.
Features
glyf
and PostScript cff
outlines)Installation
npm install opentype.js
const opentype = require('opentype.js');
import opentype from 'opentype.js'
import { load } from 'opentype.js'
Using TypeScript? See this example
Note: OpenType.js uses ES6-style imports, so if you want to edit it and debug it in Node.js run npm run build
first and use npm run watch
to automatically rebuild when files change.
Download the latest ZIP and grab the files in the dist
folder. These are compiled.
To use via a CDN, include the following code in your html:
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
To install using Bower, enter the following command in your project directory:
bower install opentype.js
You can then include them in your scripts using:
<script src="/bower_components/opentype.js/dist/opentype.js"></script>
API
Use opentype.load(url, callback)
to load a font from a URL. Since this method goes out the network, it is asynchronous. The callback gets (err, font)
where font
is a Font
object. Check if the err
is null before using the font.
opentype.load('fonts/Roboto-Black.ttf', function(err, font) {
if (err) {
alert('Font could not be loaded: ' + err);
} else {
// Now let's display it on a canvas with id "canvas"
const ctx = document.getElementById('canvas').getContext('2d');
// Construct a Path object containing the letter shapes of the given text.
// The other parameters are x, y and fontSize.
// Note that y is the position of the baseline.
const path = font.getPath('Hello, World!', 0, 150, 72);
// If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
path.draw(ctx);
}
});
You can also use es6 async/await
syntax to load your fonts
async function make(){
const font = await opentype.load('fonts/Roboto-Black.ttf');
const path = font.getPath('Hello, World!', 0, 150, 72);
console.log(path);
}
If you already have an ArrayBuffer
, you can use opentype.parse(buffer)
to parse the buffer. This method always returns a Font, but check font.supported
to see if the font is in a supported format. (Fonts can be marked unsupported if they have encoding tables we can't read).
const font = opentype.parse(myBuffer);
Use opentype.loadSync(url)
to load a font from a file and return a Font
object. Throws an error if the font could not be parsed. This only works in Node.js.
const font = opentype.loadSync('fonts/Roboto-Black.ttf');
Once you have a Font
object (either by using opentype.load
or by creating a new one from scratch) you can write it back out as a binary file.
In the browser, you can use Font.download()
to instruct the browser to download a binary .OTF file. The name is based on the font name.
// Create the bézier paths for each of the glyphs.
// Note that the .notdef glyph is required.
const notdefGlyph = new opentype.Glyph({
name: '.notdef',
unicode: 0,
advanceWidth: 650,
path: new opentype.Path()
});
const aPath = new opentype.Path();
aPath.moveTo(100, 0);
aPath.lineTo(100, 700);
// more drawing instructions...
const aGlyph = new opentype.Glyph({
name: 'A',
unicode: 65,
advanceWidth: 650,
path: aPath
});
const glyphs = [notdefGlyph, aGlyph];
const font = new opentype.Font({
familyName: 'OpenTypeSans',
styleName: 'Medium',
unitsPerEm: 1000,
ascender: 800,
descender: -200,
glyphs: glyphs});
font.download();
If you want to inspect the font, use font.toTables()
to generate an object showing the data structures that map directly to binary values. If you want to get an ArrayBuffer
, use font.toArrayBuffer()
.
A Font represents a loaded OpenType font file. It contains a set of glyphs and methods to draw text on a drawing context, or to get a path representing the text.
glyphs
: an indexed list of Glyph objects.unitsPerEm
: X/Y coordinates in fonts are stored as integers. This value determines the size of the grid. Common values are 2048 and 4096.ascender
: Distance from baseline of highest ascender. In font units, not pixels.descender
: Distance from baseline of lowest descender. In font units, not pixels.Font.getPath(text, x, y, fontSize, options)
Create a Path that represents the given text.
x
: Horizontal position of the beginning of the text. (default: 0)y
: Vertical position of the baseline of the text. (default: 0)fontSize
: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning
: if true takes kerning information into account (default: true)features
: an object with OpenType feature tags as keys, and a boolean value to enable each feature. Currently only ligature features "liga" and "rlig" are supported (default: true).hinting
: if true uses TrueType font hinting if available (default: false).Note: there is also Font.getPaths
with the same arguments which returns a list of Paths.
Font.draw(ctx, text, x, y, fontSize, options)
Create a Path that represents the given text.
ctx
: A 2D drawing context, like Canvas.x
: Horizontal position of the beginning of the text. (default: 0)y
: Vertical position of the baseline of the text. (default: 0)fontSize
: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning
: if true takes kerning information into account (default: true)features
: an object with OpenType feature tags as keys, and a boolean value to enable each feature. Currently only ligature features "liga" and "rlig" are supported (default: true).hinting
: if true uses TrueType font hinting if available (default: false).Font.drawPoints(ctx, text, x, y, fontSize, options)
Draw the points of all glyphs in the text. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as Font.draw
.
Font.drawMetrics(ctx, text, x, y, fontSize, options)
Draw lines indicating important font measurements for all glyphs in the text. Black lines indicate the origin of the coordinate system (point 0,0). Blue lines indicate the glyph bounding box. Green line indicates the advance width of the glyph.
Font.stringToGlyphs(string)
Convert the string to a list of glyph objects. Note that there is no strict 1-to-1 correspondence between the string and glyph list due to possible substitutions such as ligatures. The list of returned glyphs can be larger or smaller than the length of the given string.
Font.charToGlyph(char)
Convert the character to a Glyph
object. Returns null if the glyph could not be found. Note that this function assumes that there is a one-to-one mapping between the given character and a glyph; for complex scripts this might not be the case.
Font.getKerningValue(leftGlyph, rightGlyph)
Retrieve the value of the kerning pair between the left glyph (or its index) and the right glyph (or its index). If no kerning pair is found, return 0. The kerning value gets added to the advance width when calculating the spacing between glyphs.
Font.getAdvanceWidth(text, fontSize, options)
Returns the advance width of a text.
This is something different than Path.getBoundingBox() as for example a suffixed whitespace increases the advancewidth but not the bounding box or an overhanging letter like a calligraphic 'f' might have a quite larger bounding box than its advance width.
This corresponds to canvas2dContext.measureText(text).width
fontSize
: Size of the text in pixels (default: 72).options
: See Font.getPathA Glyph is an individual mark that often corresponds to a character. Some glyphs, such as ligatures, are a combination of many characters. Glyphs are the basic building blocks of a font.
font
: A reference to the Font
object.name
: The glyph name (e.g. "Aring", "five")unicode
: The primary unicode value of this glyph (can be undefined
).unicodes
: The list of unicode values for this glyph (most of the time this will be 1, can also be empty).index
: The index number of the glyph.advanceWidth
: The width to advance the pen when drawing this glyph.leftSideBearing
: The horizontal distance from the previous character to the origin (0, 0
); a negative value indicates an overhangxMin
, yMin
, xMax
, yMax
: The bounding box of the glyph.path
: The raw, unscaled path of the glyph.Glyph.getPath(x, y, fontSize)
Get a scaled glyph Path object we can draw on a drawing context.
x
: Horizontal position of the glyph. (default: 0)y
: Vertical position of the baseline of the glyph. (default: 0)fontSize
: Font size in pixels (default: 72).Glyph.getBoundingBox()
Calculate the minimum bounding box for the unscaled path of the given glyph. Returns an opentype.BoundingBox
object that contains x1/y1/x2/y2. If the glyph has no points (e.g. a space character), all coordinates will be zero.
Glyph.draw(ctx, x, y, fontSize)
Draw the glyph on the given context.
ctx
: The drawing context.x
: Horizontal position of the glyph. (default: 0)y
: Vertical position of the baseline of the glyph. (default: 0)fontSize
: Font size, in pixels (default: 72).Glyph.drawPoints(ctx, x, y, fontSize)
Draw the points of the glyph on the given context. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as Glyph.draw
.
Glyph.drawMetrics(ctx, x, y, fontSize)
Draw lines indicating important font measurements for all glyphs in the text. Black lines indicate the origin of the coordinate system (point 0,0). Blue lines indicate the glyph bounding box. Green line indicates the advance width of the glyph. The arguments are the same as Glyph.draw
.
Once you have a path through Font.getPath
or Glyph.getPath
, you can use it.
commands
: The path commands. Each command is a dictionary containing a type and coordinates. See below for examples.fill
: The fill color of the Path
. Color is a string representing a CSS color. (default: 'black')stroke
: The stroke color of the Path
. Color is a string representing a CSS color. (default: null
: the path will not be stroked)strokeWidth
: The line thickness of the Path
. (default: 1, but since the stroke
is null no stroke will be drawn)Path.draw(ctx)
Draw the path on the given 2D context. This uses the fill
, stroke
and strokeWidth
properties of the Path
object.
ctx
: The drawing context.Path.getBoundingBox()
Calculate the minimum bounding box for the given path. Returns an opentype.BoundingBox
object that contains x1/y1/x2/y2. If the path is empty (e.g. a space character), all coordinates will be zero.
Path.toPathData(decimalPlaces)
Convert the Path to a string of path data instructions. See https://www.w3.org/TR/SVG/paths.html#PathData
decimalPlaces
: The amount of decimal places for floating-point values. (default: 2)Path.toSVG(decimalPlaces)
Convert the path to a SVG <path> element, as a string.
decimalPlaces
: The amount of decimal places for floating-point values. (default: 2){type: 'M', x: 100, y: 200}
{type: 'L', x: 100, y: 200}
{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}
{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}
{type: 'Z'}
We use SemVer for versioning.
I would like to acknowledge the work of others without which opentype.js wouldn't be possible:
Author: Opentypejs
Source Code: https://github.com/opentypejs/opentype.js
License: MIT license
1667425440
Perl script converts PDF files to Gerber format
Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.
The general workflow is as follows:
Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).
See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.
#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;
use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)
##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file
use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call
#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software. \nGerber files MAY CONTAIN ERRORS. Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG
use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC
use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)
#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1);
#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
.010, -.001, #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
.031, -.014, #used for vias
.041, -.020, #smallest non-filled plated hole
.051, -.025,
.056, -.029, #useful for IC pins
.070, -.033,
.075, -.040, #heavier leads
# .090, -.043, #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
.100, -.046,
.115, -.052,
.130, -.061,
.140, -.067,
.150, -.079,
.175, -.088,
.190, -.093,
.200, -.100,
.220, -.110,
.160, -.125, #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
.090, -.040, #want a .090 pad option, but use dummy hole size
.065, -.040, #.065 x .065 rect pad
.035, -.040, #.035 x .065 rect pad
#traces:
.001, #too thin for real traces; use only for board outlines
.006, #minimum real trace width; mainly used for text
.008, #mainly used for mid-sized text, not traces
.010, #minimum recommended trace width for low-current signals
.012,
.015, #moderate low-voltage current
.020, #heavier trace for power, ground (even if a lighter one is adequate)
.025,
.030, #heavy-current traces; be careful with these ones!
.040,
.050,
.060,
.080,
.100,
.120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);
#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size: parsed PDF diameter: error:
# .014 .016 +.002
# .020 .02267 +.00267
# .025 .026 +.001
# .029 .03167 +.00267
# .033 .036 +.003
# .040 .04267 +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};
#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
CIRCLE_ADJUST_MINX => 0,
CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
CIRCLE_ADJUST_MAXY => 0,
SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};
#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches
#line join/cap styles:
use constant
{
CAP_NONE => 0, #butt (none); line is exact length
CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
#number of elements in each shape type:
use constant
{
RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
rect => RECT_SHAPELEN,
line => LINE_SHAPELEN,
curve => CURVE_SHAPELEN,
circle => CIRCLE_SHAPELEN,
);
#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions
# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?
#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes.
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes
#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches
# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)
# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time
# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const
use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool
my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time
print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load
#############################################################################################
#junk/experiment:
#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html
#my $caller = "pdf2gerb::";
#sub cfg
#{
# my $proto = shift;
# my $class = ref($proto) || $proto;
# my $settings =
# {
# $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
# };
# bless($settings, $class);
# return $settings;
#}
#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;
#print STDERR "read cfg file\n";
#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names
#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }
Author: swannman
Source Code: https://github.com/swannman/pdf2gerb
License: GPL-3.0 license
1632537859
Not babashka. Node.js babashka!?
Ad-hoc CLJS scripting on Node.js.
Experimental. Please report issues here.
Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.
Additional goals and features are:
Nbb requires Node.js v12 or newer.
CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).
Install nbb
from NPM:
$ npm install nbb -g
Omit -g
for a local install.
Try out an expression:
$ nbb -e '(+ 1 2 3)'
6
And then install some other NPM libraries to use in the script. E.g.:
$ npm install csv-parse shelljs zx
Create a script which uses the NPM libraries:
(ns script
(:require ["csv-parse/lib/sync$default" :as csv-parse]
["fs" :as fs]
["path" :as path]
["shelljs$default" :as sh]
["term-size$default" :as term-size]
["zx$default" :as zx]
["zx$fs" :as zxfs]
[nbb.core :refer [*file*]]))
(prn (path/resolve "."))
(prn (term-size))
(println (count (str (fs/readFileSync *file*))))
(prn (sh/ls "."))
(prn (csv-parse "foo,bar"))
(prn (zxfs/existsSync *file*))
(zx/$ #js ["ls"])
Call the script:
$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs
Nbb has first class support for macros: you can define them right inside your .cljs
file, like you are used to from JVM Clojure. Consider the plet
macro to make working with promises more palatable:
(defmacro plet
[bindings & body]
(let [binding-pairs (reverse (partition 2 bindings))
body (cons 'do body)]
(reduce (fn [body [sym expr]]
(let [expr (list '.resolve 'js/Promise expr)]
(list '.then expr (list 'clojure.core/fn (vector sym)
body))))
body
binding-pairs)))
Using this macro we can look async code more like sync code. Consider this puppeteer example:
(-> (.launch puppeteer)
(.then (fn [browser]
(-> (.newPage browser)
(.then (fn [page]
(-> (.goto page "https://clojure.org")
(.then #(.screenshot page #js{:path "screenshot.png"}))
(.catch #(js/console.log %))
(.then #(.close browser)))))))))
Using plet
this becomes:
(plet [browser (.launch puppeteer)
page (.newPage browser)
_ (.goto page "https://clojure.org")
_ (-> (.screenshot page #js{:path "screenshot.png"})
(.catch #(js/console.log %)))]
(.close browser))
See the puppeteer example for the full code.
Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet
macro is similar to promesa.core/let
.
$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)' 0.17s user 0.02s system 109% cpu 0.168 total
The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx
this adds another 300ms or so, so for faster startup, either use a globally installed nbb
or use $(npm bin)/nbb script.cljs
to bypass npx
.
Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.
To load .cljs
files from local paths or dependencies, you can use the --classpath
argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs
relative to your current dir, then you can load it via (:require [foo.bar :as fb])
. Note that nbb
uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar
in the namespace name becomes foo_bar
in the directory name.
To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:
$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"
and then feed it to the --classpath
argument:
$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]
Currently nbb
only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar
files will be added later.
The name of the file that is currently being executed is available via nbb.core/*file*
or on the metadata of vars:
(ns foo
(:require [nbb.core :refer [*file*]]))
(prn *file*) ;; "/private/tmp/foo.cljs"
(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"
Nbb includes reagent.core
which will be lazily loaded when required. You can use this together with ink to create a TUI application:
$ npm install ink
ink-demo.cljs
:
(ns ink-demo
(:require ["ink" :refer [render Text]]
[reagent.core :as r]))
(defonce state (r/atom 0))
(doseq [n (range 1 11)]
(js/setTimeout #(swap! state inc) (* n 500)))
(defn hello []
[:> Text {:color "green"} "Hello, world! " @state])
(render (r/as-element [hello]))
Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core
namespace is included with the let
and do!
macros. An example:
(ns prom
(:require [promesa.core :as p]))
(defn sleep [ms]
(js/Promise.
(fn [resolve _]
(js/setTimeout resolve ms))))
(defn do-stuff
[]
(p/do!
(println "Doing stuff which takes a while")
(sleep 1000)
1))
(p/let [a (do-stuff)
b (inc a)
c (do-stuff)
d (+ b c)]
(prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3
Also see API docs.
Since nbb v0.0.75 applied-science/js-interop is available:
(ns example
(:require [applied-science.js-interop :as j]))
(def o (j/lit {:a 1 :b 2 :c {:d 1}}))
(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1
Most of this library is supported in nbb, except the following:
:syms
.-x
notation. In nbb, you must use keywords.See the example of what is currently supported.
See the examples directory for small examples.
Also check out these projects built with nbb:
See API documentation.
See this gist on how to convert an nbb script or project to shadow-cljs.
Prequisites:
To build:
bb release
Run bb tasks
for more project-related tasks.
Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0
#node #javascript
1664965920
opentype.js is a JavaScript parser and writer for TrueType and OpenType fonts.
It gives you access to the letterforms of text from the browser or Node.js. See https://opentype.js.org/ for a live demo.
Features
glyf
and PostScript cff
outlines)Installation
npm install opentype.js
const opentype = require('opentype.js');
import opentype from 'opentype.js'
import { load } from 'opentype.js'
Using TypeScript? See this example
Note: OpenType.js uses ES6-style imports, so if you want to edit it and debug it in Node.js run npm run build
first and use npm run watch
to automatically rebuild when files change.
Download the latest ZIP and grab the files in the dist
folder. These are compiled.
To use via a CDN, include the following code in your html:
<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
To install using Bower, enter the following command in your project directory:
bower install opentype.js
You can then include them in your scripts using:
<script src="/bower_components/opentype.js/dist/opentype.js"></script>
API
Use opentype.load(url, callback)
to load a font from a URL. Since this method goes out the network, it is asynchronous. The callback gets (err, font)
where font
is a Font
object. Check if the err
is null before using the font.
opentype.load('fonts/Roboto-Black.ttf', function(err, font) {
if (err) {
alert('Font could not be loaded: ' + err);
} else {
// Now let's display it on a canvas with id "canvas"
const ctx = document.getElementById('canvas').getContext('2d');
// Construct a Path object containing the letter shapes of the given text.
// The other parameters are x, y and fontSize.
// Note that y is the position of the baseline.
const path = font.getPath('Hello, World!', 0, 150, 72);
// If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
path.draw(ctx);
}
});
You can also use es6 async/await
syntax to load your fonts
async function make(){
const font = await opentype.load('fonts/Roboto-Black.ttf');
const path = font.getPath('Hello, World!', 0, 150, 72);
console.log(path);
}
If you already have an ArrayBuffer
, you can use opentype.parse(buffer)
to parse the buffer. This method always returns a Font, but check font.supported
to see if the font is in a supported format. (Fonts can be marked unsupported if they have encoding tables we can't read).
const font = opentype.parse(myBuffer);
Use opentype.loadSync(url)
to load a font from a file and return a Font
object. Throws an error if the font could not be parsed. This only works in Node.js.
const font = opentype.loadSync('fonts/Roboto-Black.ttf');
Once you have a Font
object (either by using opentype.load
or by creating a new one from scratch) you can write it back out as a binary file.
In the browser, you can use Font.download()
to instruct the browser to download a binary .OTF file. The name is based on the font name.
// Create the bézier paths for each of the glyphs.
// Note that the .notdef glyph is required.
const notdefGlyph = new opentype.Glyph({
name: '.notdef',
unicode: 0,
advanceWidth: 650,
path: new opentype.Path()
});
const aPath = new opentype.Path();
aPath.moveTo(100, 0);
aPath.lineTo(100, 700);
// more drawing instructions...
const aGlyph = new opentype.Glyph({
name: 'A',
unicode: 65,
advanceWidth: 650,
path: aPath
});
const glyphs = [notdefGlyph, aGlyph];
const font = new opentype.Font({
familyName: 'OpenTypeSans',
styleName: 'Medium',
unitsPerEm: 1000,
ascender: 800,
descender: -200,
glyphs: glyphs});
font.download();
If you want to inspect the font, use font.toTables()
to generate an object showing the data structures that map directly to binary values. If you want to get an ArrayBuffer
, use font.toArrayBuffer()
.
A Font represents a loaded OpenType font file. It contains a set of glyphs and methods to draw text on a drawing context, or to get a path representing the text.
glyphs
: an indexed list of Glyph objects.unitsPerEm
: X/Y coordinates in fonts are stored as integers. This value determines the size of the grid. Common values are 2048 and 4096.ascender
: Distance from baseline of highest ascender. In font units, not pixels.descender
: Distance from baseline of lowest descender. In font units, not pixels.Font.getPath(text, x, y, fontSize, options)
Create a Path that represents the given text.
x
: Horizontal position of the beginning of the text. (default: 0)y
: Vertical position of the baseline of the text. (default: 0)fontSize
: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning
: if true takes kerning information into account (default: true)features
: an object with OpenType feature tags as keys, and a boolean value to enable each feature. Currently only ligature features "liga" and "rlig" are supported (default: true).hinting
: if true uses TrueType font hinting if available (default: false).Note: there is also Font.getPaths
with the same arguments which returns a list of Paths.
Font.draw(ctx, text, x, y, fontSize, options)
Create a Path that represents the given text.
ctx
: A 2D drawing context, like Canvas.x
: Horizontal position of the beginning of the text. (default: 0)y
: Vertical position of the baseline of the text. (default: 0)fontSize
: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning
: if true takes kerning information into account (default: true)features
: an object with OpenType feature tags as keys, and a boolean value to enable each feature. Currently only ligature features "liga" and "rlig" are supported (default: true).hinting
: if true uses TrueType font hinting if available (default: false).Font.drawPoints(ctx, text, x, y, fontSize, options)
Draw the points of all glyphs in the text. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as Font.draw
.
Font.drawMetrics(ctx, text, x, y, fontSize, options)
Draw lines indicating important font measurements for all glyphs in the text. Black lines indicate the origin of the coordinate system (point 0,0). Blue lines indicate the glyph bounding box. Green line indicates the advance width of the glyph.
Font.stringToGlyphs(string)
Convert the string to a list of glyph objects. Note that there is no strict 1-to-1 correspondence between the string and glyph list due to possible substitutions such as ligatures. The list of returned glyphs can be larger or smaller than the length of the given string.
Font.charToGlyph(char)
Convert the character to a Glyph
object. Returns null if the glyph could not be found. Note that this function assumes that there is a one-to-one mapping between the given character and a glyph; for complex scripts this might not be the case.
Font.getKerningValue(leftGlyph, rightGlyph)
Retrieve the value of the kerning pair between the left glyph (or its index) and the right glyph (or its index). If no kerning pair is found, return 0. The kerning value gets added to the advance width when calculating the spacing between glyphs.
Font.getAdvanceWidth(text, fontSize, options)
Returns the advance width of a text.
This is something different than Path.getBoundingBox() as for example a suffixed whitespace increases the advancewidth but not the bounding box or an overhanging letter like a calligraphic 'f' might have a quite larger bounding box than its advance width.
This corresponds to canvas2dContext.measureText(text).width
fontSize
: Size of the text in pixels (default: 72).options
: See Font.getPathA Glyph is an individual mark that often corresponds to a character. Some glyphs, such as ligatures, are a combination of many characters. Glyphs are the basic building blocks of a font.
font
: A reference to the Font
object.name
: The glyph name (e.g. "Aring", "five")unicode
: The primary unicode value of this glyph (can be undefined
).unicodes
: The list of unicode values for this glyph (most of the time this will be 1, can also be empty).index
: The index number of the glyph.advanceWidth
: The width to advance the pen when drawing this glyph.leftSideBearing
: The horizontal distance from the previous character to the origin (0, 0
); a negative value indicates an overhangxMin
, yMin
, xMax
, yMax
: The bounding box of the glyph.path
: The raw, unscaled path of the glyph.Glyph.getPath(x, y, fontSize)
Get a scaled glyph Path object we can draw on a drawing context.
x
: Horizontal position of the glyph. (default: 0)y
: Vertical position of the baseline of the glyph. (default: 0)fontSize
: Font size in pixels (default: 72).Glyph.getBoundingBox()
Calculate the minimum bounding box for the unscaled path of the given glyph. Returns an opentype.BoundingBox
object that contains x1/y1/x2/y2. If the glyph has no points (e.g. a space character), all coordinates will be zero.
Glyph.draw(ctx, x, y, fontSize)
Draw the glyph on the given context.
ctx
: The drawing context.x
: Horizontal position of the glyph. (default: 0)y
: Vertical position of the baseline of the glyph. (default: 0)fontSize
: Font size, in pixels (default: 72).Glyph.drawPoints(ctx, x, y, fontSize)
Draw the points of the glyph on the given context. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as Glyph.draw
.
Glyph.drawMetrics(ctx, x, y, fontSize)
Draw lines indicating important font measurements for all glyphs in the text. Black lines indicate the origin of the coordinate system (point 0,0). Blue lines indicate the glyph bounding box. Green line indicates the advance width of the glyph. The arguments are the same as Glyph.draw
.
Once you have a path through Font.getPath
or Glyph.getPath
, you can use it.
commands
: The path commands. Each command is a dictionary containing a type and coordinates. See below for examples.fill
: The fill color of the Path
. Color is a string representing a CSS color. (default: 'black')stroke
: The stroke color of the Path
. Color is a string representing a CSS color. (default: null
: the path will not be stroked)strokeWidth
: The line thickness of the Path
. (default: 1, but since the stroke
is null no stroke will be drawn)Path.draw(ctx)
Draw the path on the given 2D context. This uses the fill
, stroke
and strokeWidth
properties of the Path
object.
ctx
: The drawing context.Path.getBoundingBox()
Calculate the minimum bounding box for the given path. Returns an opentype.BoundingBox
object that contains x1/y1/x2/y2. If the path is empty (e.g. a space character), all coordinates will be zero.
Path.toPathData(decimalPlaces)
Convert the Path to a string of path data instructions. See https://www.w3.org/TR/SVG/paths.html#PathData
decimalPlaces
: The amount of decimal places for floating-point values. (default: 2)Path.toSVG(decimalPlaces)
Convert the path to a SVG <path> element, as a string.
decimalPlaces
: The amount of decimal places for floating-point values. (default: 2){type: 'M', x: 100, y: 200}
{type: 'L', x: 100, y: 200}
{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}
{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}
{type: 'Z'}
We use SemVer for versioning.
I would like to acknowledge the work of others without which opentype.js wouldn't be possible:
Author: Opentypejs
Source Code: https://github.com/opentypejs/opentype.js
License: MIT license
1606912089
#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html
1626321063
PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.
With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.
Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.
Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.
#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company