Issues with text display & rendering

Modified on Wed, 25 Mar 2020 at 04:43 PM

Online editing-layout applications using HTML5 are challenged by limitations in current browsers with regards to the position/inset/spacing of text. The same text displayed on two separate browsers will appear different. This is because each browser has its own text engine, which treats inter-character & interline spacing in its own manner. This issue will also occur when the text is rendered: the final position of rendered text may differ to what is displayed on-screen.

As the amount of text increases within a single text frame, the discrepancy between what is displayed on your editing page and what is rendered will become greater.

 For example, notice below how the text ends in a different position and the spacing is not the same between lines.

In Memento Yearbook's page editor

Paragraph view:
Final render

Paragraph view:
Larger text shown on a full page:
Larger text shown on a full page:

The issue is easily visible in the Editor itself - check to see if the page preview matches the page in edit mode. If you notice the text doesn't break in the same places, it will render like the thumbnail preview.

For best results:

  • use Memento Yearbook on the Chrome browser. It is the most developed to support third-party applications and least likely to result in visible differences between your editor page and the final render.

  • divide long paragraphs of text into a series of smaller text frames. The start point of text is always true - the displacement occurs as more text is added.

  • for short text, try resizing the width of the text frame so it is a little larger.

Be very careful during proofing to verify all text, including portrait labels. Longer names may move to a separate line. To fix labels, launch the portrait page, and reduce the font size, either for all labels or to the individual longer names that are being split 

Unfortunately, this is not an issue that can be resolved by our developers - it is a generalized problem affecting all online HTML5 editing/layout applications.  Certain text features are disabled in online editors & layout tools because of these positioning problems (strikethrough, underline, even shadows). 

Note that we have tested this in other online applications - the same issue is present and well-documented among application developers.  We will monitor developments in browser text engine technologies to see if we are able to minimize or resolve this problem.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article