Text to PNG

Like Unicolor PNG this was another shortcut I had for some time. Occasionally I needed an image of a text of a particular typeface, size, colors, and centered in a rectangle. The amazing Canvas API from JavaScript made this quite easy: some typography notions and a bit of math, and I had a decent 1.0 version in shortcut form. Then iOS 15.2 came with a new action, "Overlay text", which did even more things than my shortcut. But both had still a serious limitation: both the shortcut and the new native action were for a single line of text. So I went down the rabbit hole of text wrapping, hyphenation , and typography in JavaScript, and ended up with the new 2.0 version of the shortcut. As with version 1.x, the shortcut works as a demo when it has no input (showing the result to the user), and as a function when it receives a dictionary (or JSON string) with parameters (returning silently the output image). Version 2.0 of the shortcut goes up to twelve parameters : text is the text you want to convert to an image (in the demo dictionary inside the shortcut, the ✂ emojis mark possible hyphenation points) font is the style, size and typeface to use, using CSS syntax (e.g. bold 56px Gill Sans ) width and height are the desired dimensions of the image in pixels. If width is omitted, the text won't be wrapped and the image will be as wide as needed to contain the text as a single line. If height is not large enough for the indicated text and font, the image will grow taller. color is the color of the text, and can have any valid CSS color value (e.g. red , #FF00FF , rgba(255, 127, 0, 0.5) , hsl(90deg, 100%, 50%) , hwb(194 0% 0% /.5) , transparent ) bgcolor is the background color of the text alignment aligns the text vertically ( top , center , bottom ) and/or horizontally ( left , center , right ). Examples: top left , center , bottom right padding is additional space around the text, using CSS syntax, but only in pixels spacing multiplies the space between lines of wrapped text outline allows drawing a line around each letter with a custom width and color. Example: 2px #DC0 shadow adds a shadow effect to the text, using also CSS syntax. Example: 2px 2px 4px black hyphen is the custom character in the text to be considered an hyphenation point (where a word can be broken to wrap the text). By default it's the "¬" character, and the shortcut also supports Unicode soft hyphens (normally invisible). With these and a couple hundred lines of JavaScript the desired PNG is generated. The shortcut has only 15 actions, because all the work is done with JavaScript, which I've tried to make clear and readable. TO DO Fix application of left/right margins when they're different Add support for multiple shadows