Skip to content

Small, minimalistic graphics for powerful ideas in a few words.

License

Notifications You must be signed in to change notification settings

theandrebass/Typocard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Typogram 🖼️

Typogram is a simple web app to create nice-looking, minimalistic graphics that focus on a short snippet of text for sharing on the web.

Typogram allows you to set optional headers and footers to anchor or attribute a text or quote, and provides some minimal customization options for design style. You can enter text in Slack-style Markdown format (with *bold* and _italics_, etc.), and the parser supports a full gamut of semantic display elements including quotes, lists, and code blocks.

Screenshot Typogram

Implementation

To render Markdown text, Typogram uses a simple (but sufficient) hand-written Markdown parser in /js/notation.js that quickly parses a variant of Markdown to JSON virtual DOM that Torus can efficiently render. This is passed to Torus's rendering logic.

The graphic is initially created and previewed as normal DOM elements, scaled to fit the editor on smaller displays. To download/export the graphic, Typogram depends on html2canvas which (mostly correctly) emulates the DOM to render an equivalent image on a canvas, which is then converted to a PNG. There are some known bugs in html2canvas, but I don't consider this a huge issue since screen-capturing the preview usually also works as a workaround.

About

Small, minimalistic graphics for powerful ideas in a few words.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published