Articles in this section

See more

Fixing Distorted or Huge Text Formatting in WYSIWYG Editor

Pavlos Kaimakis
  • Updated
Follow

Overview

You set a specific text font size but when you check your app on your device you notice the text formatting is distorted or larger than expected. This article explains why and shows how you can work around it.

Diagnosis

You noticed an issue with your text font sizing upon accessing your app on your device. The text appears to be huge and much bigger than what you set on the WYSIWYG Editor and viewed in the Previewer function.

For example, you may come across a text like the one in the following image: 

distorted_image.jpg

Text formatting/font may render differently on various devices. This can be related to 

  • The HTML code in the text when pasting it in the WYSIWYG Text Editor 
  • Text in features display differently depending on the device.
    • Depending on screen resolution and pixel density the way the text is presented may seem larger than normal. 
    • This generally occurs on low-end Android devices. 
    • Our Development Team has confirmed that the app scales dynamically according to the device, therefore it isn't possible to modify the behavior to accommodate each specific device.

Note: On other devices, the same text may render as expected.

Back to top

Solution

As this issue depends on the device, we cannot guarantee that the below solution will work. Nonetheless, if the issue related to the HTML code, you can try the below procedure

 1. Paste the text/code containing the HTML code in an HTML cleaner tool (eg https://www.htmlwasher.com/)

2. (For the case of the above-mentioned htmlwasher tool) Click Wash.

mceclip0.png

  • HTML Washer: 
    • Fixes or removes non-well formed tags and attributes (e.g. adds alt attributes to images if missing)
    • Converts the markup to HTML5 (if it is XHTML for example)
    • Reduces the markup to:  
      <ahref>, <body>, <br>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <hr>, <html>, <i>, <img src width height alt>, <li>, <ol>, <p>, <ruby>, <strong>, <table>, <tbody>, <td colspan rowspan>, <th colspan rowspan>, <title>, <tr>, <ul>
    • Replaces: <b> to <strong>
    • Reformats the HTML (line breaks, indents)

3. Copy the the text/code from the HTML cleaner tool and paste in the WYSIWYG Editor in the code view option.

mceclip4.png

4. Click Save  on the upper right-hand corner

mceclip3.png

Note: If the above solution does not work, you can try the steps in the Solution Section of the Pasting Text in WYSIWYG Editor Results In Different Format KB article.

Back to top

Testing

The text will render as expected (that is, as you have set it in the WYSIWYG text).

For instance, the image in the Diagnosis Section will be converted to:

 ok_pic.png

Back to top

Related Articles

Comments

0 comments

Please sign in to leave a comment.