Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed text as paths #20

Merged
merged 11 commits into from
Jan 14, 2023
Merged

Embed text as paths #20

merged 11 commits into from
Jan 14, 2023

Conversation

h4l
Copy link
Owner

@h4l h4l commented Jan 14, 2023

We now generate SVG s to represent text that previously used web
fonts. This removes all external dependencies, so SVG docs are entirely
stand-alone. It also allows them to be rendered correctly by programs
not capable of rendering web fonts in SVG (e.g. Inkscape).

A further benefit is that Firefox can render these SVG docs to a canvas,
without the need to embed the fonts as data: URIs (FF doesn't allow
external references in SVG files rendered to a canvas).

We keep an invisible element at the same position as the visible
text, so the text is still present in the SVG file for metadata
& copying to clipboard purposes.

This implements #1 .

h4l added 10 commits January 6, 2023 04:40
node-fetch remains pinned at ^2 because ^3 only provides ES modules
which are painful to use with jest right now.
Our chrome API mock now supports sendMessage(), by calling listeners
registered on chrome.runtime.onMessage.
This service can generate SVG paths from strings of text, with custom
fonts. We'll use it to remove the need to embed reference/embed web
fonts in our generated SVG files.

It's implemented as a separate service in order to maintain a clear
boundary between this portion of the codebase and the rest. The reason
for that is that we use opentype.js for text to path rendering, and this
library is massive (—0.5MB of js) and I want the code to remain
auditable. Bundling so much code into the main part of the app goes
against that goal.
Like @preact/signals's computed(), but for async compute functions.
We need to be able to use async functions to generate avatar SVG so that
we can async-fetch text-to-path results when rendering the NFT card
avatar.
We now generate SVG <path>s to represent text that previously used web
fonts. This removes all external dependencies, so SVG docs are entirely
stand-alone. It also allows them to be rendered correctly by programs
not capable of rendering web fonts in SVG (e.g. Inkscape).

A further benefit is that Firefox can render these SVG docs to a canvas,
without the need to embed the fonts as data: URIs (FF doesn't allow
external references in SVG files rendered to a canvas).

We keep an invisible <text> element at the same position as the visible
<path> text, so the text is still present in the SVG file for metadata
& copying to clipboard purposes.
@h4l h4l self-assigned this Jan 14, 2023
@h4l h4l merged commit 5dcb6f6 into main Jan 14, 2023
@h4l h4l deleted the embed-text-as-paths branch January 14, 2023 07:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant