# Text to PNG | Shortcuts Library

> Convert text to an image with many custom parameters

## What this shortcut does

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

## Compatibility

iPhone, iPad

## Required apps



[View this page](https://shortcutlibrary.app/shortcuts/text-to-png)

[Download Shortcuts Library on the App Store](https://apps.apple.com/app/id6759494377)