Rendering Differences

Pixel draws an image twice, with two different engines:

• The editor canvas is drawn by your browser, so you can edit it live.
• The rendered image is drawn on the server by ImageMagick, through the Imagick PHP extension. This is the file your pages, the PHP functions and the shortcode use.

The two engines lay out text and shapes in slightly different ways, so line breaks, letter spacing, and the exact position of text can differ a little between the canvas and the file. Text that would overflow its box is also treated differently: the server shrinks it to fit.

Checking the final result

Preview image in the editor’s toolbar renders the current design, saved or not, on the server for the post chosen as preview data. What it shows is what Pixel will produce, so use it:

• after changing fonts, sizes or spacing,
• with posts whose titles are short and long,
• before relying on pixel-exact alignment.

Building a design up in steps and previewing as you go makes a difference easy to trace to the change that caused it.

When an element is missing

The server skips an element it cannot draw, such as text in a font file it cannot read, and still renders the rest of the image. Text in a font that is not available renders in the Default font instead. If something shows in the editor but not in the rendered image, see Troubleshooting.