https://github.com/clauseggers/bx90000fontpresentersupersuite
A stand-alone webpage that flips through the glyphs of a font
https://github.com/clauseggers/bx90000fontpresentersupersuite
animation font fontdevelopment fonts html-css-javascript testing testpage typeface typefacedevelopment variablefonts webfonts
Last synced: 7 months ago
JSON representation
A stand-alone webpage that flips through the glyphs of a font
- Host: GitHub
- URL: https://github.com/clauseggers/bx90000fontpresentersupersuite
- Owner: clauseggers
- License: mit
- Created: 2024-11-12T10:17:57.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-04T16:01:13.000Z (10 months ago)
- Last Synced: 2025-03-23T18:49:57.800Z (7 months ago)
- Topics: animation, font, fontdevelopment, fonts, html-css-javascript, testing, testpage, typeface, typefacedevelopment, variablefonts, webfonts
- Language: JavaScript
- Homepage:
- Size: 10.6 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# The BX90000 Font Presenter Super Suite
This is a collection of three webpages that enables you to present fonts in three different ways.
## HyperFlip BX90000 Dominator
Will animate single glyphs from the font you drop on the window.
## WordMaster BX90000 Excelsior
Will animate words rendered in the font you drop on the window.
## GalleyProof BX90000 Zenith
Will render a column of text in the font you drop on the window.
## License
Like the included `opentype.js` this software is licensed under the MIT license.
## Requirements
These pages needs to be served with the `http_server` webserver component from [Node](https://nodejs.org/en/download), so this must be installed before using these pages. The `serve.sh` script will detect and alert you if this component is not installed.
The `serve.sh` and `serve.bat` scripts are configured to find and use the Chrome browser.
An internet connection is not necessary.
## How to use the BX90000 Font Presenter Super Suite
Execute the `serve.sh` (Linux or MacOS) or `serve.bat` (Windows). These scripts will check for the presence of the `http_server`, warn you if it isn’t installed, otherwise proceed with detecting your operating system, finding the Chrome executable, and open the `index.html` in an Incognito window.
Click on one of the three options.
## HyperFlip BX90000 Dominator
Will animate single glyphs from the font you drop on the window.
### Options
- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
- Pause/continue the glyph animation by pressing your `space` key
- Jump ten glyphs forward by pressing the `l` or `▶︎` key
- Jump one glyph forward by pressing the `k` or `▲` key
- Jump ten glyphs backwards by pressing the `h` or `◀︎` key
- Jump one glyph backwards by pressing the `j` or `▼` key
The page has a control panel that will appear when you hover the mouse over the bottom of the page
- Show font info
- Show glyph info
- Show a metrics grid overlay
- Swap colours
- Randomise glyph order
- Adjust the font size
- Adjust the vertical position
- Adjust the animation delay
- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)
## WordMaster BX90000 Excelsior
Will animate words rendered in the font you drop on the window.
### Options
- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
- Pause/continue the glyph animation by pressing your `space` key
The page has a control panel that will appear when you hover the mouse over the bottom of the page
- Show font info
- Swap colours
- Toggle Stylistic Alternates and small-caps
- Adjust the font size
- Adjust the animation delay
- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)
## GalleyProof BX90000 Zenith
Will render a column of text in the font you drop on the window.
### Options
- Fullscreen mode (press the `Fullscreen` button or press your `f` key)
The page has a control panel that will appear when you hover the mouse over the bottom of the page
- Show font info
- Swap colours
- Toggle Stylistic Alternates and small-caps
- Adjust the font size
- Adjust the leading
- Adjust the column width
- Adjust the letter spacing
- Adjust the word spacing
- Adjust the Variable Font axes settings (these will only appear if the font contains variable font axes)