Skip to content

Commit

Permalink
Fix examples pages
Browse files Browse the repository at this point in the history
  • Loading branch information
yne committed May 1, 2023
1 parent 70b2db8 commit d9e369e
Show file tree
Hide file tree
Showing 7 changed files with 735 additions and 732 deletions.
34 changes: 29 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ If you plan on improving or debugging opentype.js, you can:

## Usage

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

```js
// case 1: from an URL
Expand All @@ -81,17 +81,41 @@ const buffer = require('fs').promises.readFile('./my.woff');
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

// if running in async context:
const font = opentype.parse(await data);
console.log(font.supported);
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
const font = opentype.parse(data);
// ... play with `font` ...
console.log(font.supported);
console.log(font);
})
```

### Loading a WOFF2 font

WOFF2 Brotli compression perform [29% better](https://www.w3.org/TR/WOFF20ER/#appendixB) than it WOFF predecessor.
But this compression is also more complex, and would result having a much heavier opentype.js library (~120KB => ~1400KB).

To solve this: Decompress the font beforehand (for example with [fontello/wawoff2](https://github.com/fontello/wawoff2)).

```js
// promise-based utility to load libraries using the good old <script> tag
const loadScript = (src) => new Promise((onload) => document.documentElement.append(
Object.assign(document.createElement('script'), {src, onload})
));

const buffer = //...same as previous example...

// load wawoff2 if needed and wait (!) for it to be ready
if (!window.Module) {
const path = 'https://unpkg.com/[email protected]/build/decompress_binding.js'
const init = new Promise((done) => window.Module = { onRuntimeInitialized: done});
await loadScript(path).then(() => init);
}
// decompress before parsing
const font = opentype.parse(Module.decompress(await buffer));
```

### Loading a font (1.x style)

This example rely on the deprecated `.load()` method
Expand Down
83 changes: 41 additions & 42 deletions docs/examples/creating-fonts.html
Original file line number Diff line number Diff line change
@@ -1,52 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenType writing</title>
<script src="/dist/opentype.js"></script>
<style>
body {
font: 13px Helvetica, arial, freesans, sans-serif;
line-height: 1.4;
color: #333;
margin: 0 0 50px 0;
padding: 0;
}
<meta charset="UTF-8">
<title>OpenType writing</title>
<style>
body {
font: 13px Helvetica, arial, freesans, sans-serif;
line-height: 1.4;
color: #333;
margin: 0 0 50px 0;
padding: 0;
}

.container {
width: 940px;
margin-left: auto;
margin-right: auto;
}
.container {
width: 940px;
margin-left: auto;
margin-right: auto;
}

#glyphs {
clear: both;
}
#glyphs {
clear: both;
}

.wrapper {
float: left;
margin: 5px;
border: 1px solid #ccc;
}
.wrapper {
float: left;
margin: 5px;
border: 1px solid #ccc;
}

.wrapper span {
text-align: center;
background: #ddd;
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1 id="fontFamilyName"></h1>
.wrapper span {
text-align: center;
background: #ddd;
display: block;
}
</style>

<form class="container" name="demo">
<h1><output name="fontFamilyName"></output></h1>

<p>This font is generated dynamically in the browser.</p>
<button onclick="font.download()">Download Font</button>
<a id="download-font" download="generated.otf">Download Font</button>

<div id="glyphs"></div>
</div>
</form>

<script>
<script type="module">
import * as opentype from "/dist/opentype.module.js";
function hexDump(bytes) {
var hexString = bytes.map(function(v) {
var h = v.toString(16);
Expand Down Expand Up @@ -134,8 +132,7 @@ <h1 id="fontFamilyName"></h1>
var buffer = font.toArrayBuffer();
var font2 = opentype.parse(buffer);

document.getElementById('fontFamilyName').innerHTML = font2.names.fontFamily.en;


for (var i = 0; i < font2.glyphs.length; i++) {
var glyph = font2.glyphs.get(i);
var ctx = createGlyphCanvas(glyph, 150);
Expand All @@ -146,7 +143,9 @@ <h1 id="fontFamilyName"></h1>
glyph.drawPoints(ctx, x, y, fontSize);
glyph.drawMetrics(ctx, x, y, fontSize);
}
const form = document.forms.demo;
form.fontFamilyName.innerText = font2.names.windows.fontFamily.en;
const a = document.getElementById('download-font');
a.href = window.URL.createObjectURL(new Blob([font2.toArrayBuffer()], {type: "font/otf"}))

</script>
</body>
</html>
Loading

0 comments on commit d9e369e

Please sign in to comment.