TxtJS

A <canvas> font and typesetting engine for @CreateJS.

Architecture Diagram

Features

Font conversion tool
Fonts Handle Kerning, Ligatures
Customise Style: Font family, Size, Stroke, Case, Tracking, Line height
- Styling can apply to individual characters
Render text along paths
Text box layout: Size, Horizontal & Vertical Alignment, Multi line - Wordwrap or character wrap
Accessibility text added inside canvas element
Visual debugging helpers

Configuration

Choose path to load fonts from

txt.FontLoader.path = "custom/font/path/";

Visual tests

We need to test with anti-aliasing disabled because our TravisCI environment runs tests on Chrome headless. So saved reference images are saved with antialiasing disabled.

This means running tests locally needs to be done with the right chrome flags.

Debugging Travis Builds via Docker

As per https://docs.travis-ci.com/user/running-build-in-debug-mode/#restarting-a-job-in-debug-mode-via-api:

Fetch personal API access token from Travis web site profile: Find out Travis job ID from web UI job url.

Then in a regular shell, using the TRAVIS_TOKEN and TRAVIS_JOBID environment variables:

TRAVIS_TOKEN="get_token_from_profile"; \
TRAVIS_JOBID="get_jobid_from_url"; \
curl -s -X POST \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "Travis-API-Version: 3" \
  -H "Authorization: token ${TRAVIS_TOKEN}" \
  -d "{\"quiet\": true}" \
  https://api.travis-ci.org/job/${TRAVIS_JOBID}/debug

Use tmux to split terminal into separate views: Ctrl + B then press ".

Debugging Chrome Headless

Start testem without launching any browsers

npm run test:dev
# or
npx testem --launch=none

Get the DOM output from Google Chrome:

google-chrome \
  --headless \
  --disable-gpu \
  --dump-dom \
  http://localhost:7357/

Further Chrome headless debugging info: https://developers.google.com/web/updates/2017/04/headless-chrome