Skip to content

Commit 68c43ac

Browse files
authored
Sane buildflow (#703)
* Migrate to Mocha 10 - Rename src/*.js to src/*.mjs and test/*.js to test/*.spec.mjs - Move misplaced "eslint-plugin-local-rules" to devDependencies - Remove unused reify now that we are fully .mjs - Deprecate load*/download functions and remove associated tests - Remove dead code (private load*() function, isNode/isBrowser...) - Support multiple test runner: ```sh npx mocha npx bun test npx jasmine "**/*.spec.mjs" # may fail on strict compare ``` * Rework eslint rules There are currently 3 local rules: - ban forEach => migrate to a "selector" rule - prevent import loop => did nothing - force import extension => esbuild enforce it already This halves (226 => 139) our NPM dependencies * Use eslint@9 Use new configuration format since package.json based configuration have been droped * Apply remarks
1 parent c6a3cb8 commit 68c43ac

File tree

122 files changed

+1116
-3724
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

122 files changed

+1116
-3724
lines changed

README.md

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Select one of the following sources in the next example:
4141

4242
<!-- using module declaration (need full path) -->
4343
<script type=module>
44-
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.module.js";
44+
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.mjs";
4545
parse(...);
4646
</script>
4747
```
@@ -80,14 +80,18 @@ If you plan on improving or debugging opentype.js, you can:
8080

8181
### Loading a WOFF/OTF/TTF font
8282

83+
This is done in two steps: first, we load the font file into an `ArrayBuffer` ...
8384
```js
84-
// case 1: from an URL
85+
// either from an URL
8586
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
86-
// case 2: from filesystem (node)
87+
// ... or from filesystem (node)
8788
const buffer = require('fs').promises.readFile('./my.woff');
88-
// case 3: from an <input type=file id=myfile>
89+
// ... or from an <input type=file id=myfile> (browser)
8990
const buffer = document.getElementById('myfile').files[0].arrayBuffer();
91+
```
9092

93+
... then we `.parse()` it into a `Font` instance
94+
```js
9195
// if running in async context:
9296
const font = opentype.parse(await buffer);
9397
console.log(font);
@@ -99,7 +103,8 @@ buffer.then(data => {
99103
})
100104
```
101105

102-
### Loading a WOFF2 font
106+
<details>
107+
<summary>Loading a WOFF2 font</summary>
103108

104109
WOFF2 Brotli compression perform [29% better](https://www.w3.org/TR/WOFF20ER/#appendixB) than it WOFF predecessor.
105110
But this compression is also more complex, and would result in a much heavier (&gt;10×!) opentype.js library (≈120KB => ≈1400KB).
@@ -123,30 +128,14 @@ if (!window.Module) {
123128
// decompress before parsing
124129
const font = opentype.parse(Module.decompress(await buffer));
125130
```
131+
</details>
126132

127-
### Loading a font (1.x style)
128-
129-
This example relies on the deprecated `.load()` method
133+
### Craft a font
130134

131-
```js
132-
// case 1: from an URL
133-
const font = opentype.load('./fonts/my.woff', {}, {isUrl: true});
134-
// case 2: from filesystem
135-
const font = opentype.load('./fonts/my.woff', {}, {isUrl: false});
136-
137-
// ... play with `font` ...
138-
console.log(font.supported);
139-
```
135+
It is also possible to craft a Font from scratch by defining each glyph bézier paths.
140136

141-
### Writing a font
142-
Once you have a `Font` object (either by using `opentype.load()` or by creating a new one from scratch) you can write it
143-
back out as a binary file.
144-
145-
In the browser, you can use `Font.download()` to instruct the browser to download a binary .OTF file. The name is based
146-
on the font name.
147137
```javascript
148-
// Create the bézier paths for each of the glyphs.
149-
// Note that the .notdef glyph is required.
138+
// this .notdef glyph is required.
150139
const notdefGlyph = new opentype.Glyph({
151140
name: '.notdef',
152141
advanceWidth: 650,
@@ -164,21 +153,27 @@ const aGlyph = new opentype.Glyph({
164153
path: aPath
165154
});
166155

167-
const glyphs = [notdefGlyph, aGlyph];
168156
const font = new opentype.Font({
169157
familyName: 'OpenTypeSans',
170158
styleName: 'Medium',
171159
unitsPerEm: 1000,
172160
ascender: 800,
173161
descender: -200,
174-
glyphs: glyphs});
175-
font.download();
162+
glyphs: [notdefGlyph, aGlyph]});
176163
```
177164

178-
If you want to inspect the font, use `font.toTables()`
179-
to generate an object showing the data structures that map directly to binary values.
180-
If you want to get an `ArrayBuffer`, use `font.toArrayBuffer()`.
165+
### Saving a Font
166+
167+
Once you have a `Font` object (from crafting or from `.parse()`) you can save it back out as file.
181168

169+
```js
170+
// using node:fs
171+
fs.writeFileSync("out.otf", Buffer.from(font.toArrayBuffer()));
172+
173+
// using the browser to createElement a <a> that will be clicked
174+
const href = window.URL.createObjectURL(new Blob([font.toArrayBuffer()]), {type: "font/opentype"});
175+
Object.assign(document.createElement('a'), {download: "out.otf", href}).click();
176+
```
182177

183178
### The Font object
184179
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.

docs/examples/creating-fonts.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1><output name="fontFamilyName"></output></h1>
4444
</form>
4545

4646
<script type="module">
47-
import * as opentype from "/dist/opentype.module.js";
47+
import * as opentype from "/dist/opentype.mjs";
4848
function hexDump(bytes) {
4949
var hexString = bytes.map(function(v) {
5050
var h = v.toString(16);

docs/examples/font-editor.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ <h1>Experimental font editor</h1>
174174

175175
<textarea id="code"></textarea>
176176
<script type="module">
177-
import * as opentype from "/dist/opentype.module.js";
177+
import * as opentype from "/dist/opentype.mjs";
178178

179179
function linePoint(t, x1, y1, x2, y2) {
180180
return [x1 + t * (x2 - x1),

docs/examples/reading-writing.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h1><output name="fontFamilyName"></output></h1>
4242
</form>
4343

4444
<script type="module">
45-
import * as opentype from "/dist/opentype.module.js";
45+
import * as opentype from "/dist/opentype.mjs";
4646

4747
// Create a canvas and adds it to the document.
4848
// Returns the 2d drawing context.

docs/examples/typescript/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

2-
import opentype from '../../dist/opentype.module'
2+
import opentype from '../../dist/opentype.mjs'
33
console.log(opentype)
44
// or
5-
import { load } from '../../dist/opentype.module'
5+
import { load } from '../../dist/opentype.mjs'
66
console.log(load)
77
// or
8-
import * as mySpecialOpentype from '../../dist/opentype.module'
8+
import * as mySpecialOpentype from '../../dist/opentype.mjs'
99
console.log(mySpecialOpentype)

docs/font-inspector.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ <h1>Free Software</h1>
9999

100100

101101
<script type="module">
102-
import * as opentype from "/dist/opentype.module.js";
102+
import * as opentype from "/dist/opentype.mjs";
103103

104104
var font = null;
105105
const fontSize = 32;

docs/glyph-inspector.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h1>Free Software</h1>
6969

7070

7171
<script type="module">
72-
import * as opentype from "/dist/opentype.module.js";
72+
import * as opentype from "/dist/opentype.mjs";
7373

7474
window.opentype = opentype;
7575

docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ <h1>Free Software</h1>
7676

7777

7878
<script type="module">
79-
import * as opentype from "/dist/opentype.module.js";
79+
import * as opentype from "/dist/opentype.mjs";
8080

8181
const form = document.forms.demo;
8282
form.oninput = renderText;

docs/module.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<script type="module">
2-
import * as ot from '/dist/opentype.module.js';
2+
import * as ot from '/dist/opentype.mjs';
33
console.log(ot)
44
</script>

eslint-local-rules.js

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)