How to optimize text for different browsers?

Frequently Asked Questions about WYSIWYG Web Builder
Locked
User avatar
Pablo
 
Posts: 19375
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

How to optimize text for different browsers?

Post by Pablo » Thu Oct 28, 2010 6:33 am

Unfortunately there is no way to make text look exactly the same in all browsers. Each browser uses its own text rendering engine and they all render text in a different way.
And although WYSIWYG Web Builder uses pixels to specify the font size, this still causes different results in different browsers.

A common problem with Safari and FireFox based browsers is that they do not handle large text blocks in combination with CSS absolute positioning very well.
This will usually result in the text block being larger than designed, so it may overlap other objects in the layout.

Here are a few tips to prevent this from happening:

Split your text up into multiple (smaller) text objects
Also try not to use too any blank lines in the text. If you have more than 2 blank lines you should consider putting the second paragraph in a separate text object.
The behavior of blank lines in text is undefined. Some browsers use the current font size to determine the size between two lines while other use the default font.

This tip also applies to text based (vertical) menu's like the CSS Menu, Text Menu and Menu Bar. The size of these menus depends on the size of the text. So if you have a lot of items in the menu, please consider breaking it up into multiple smaller menus)

Use websafe fonts only
Websafe (or "web safe", "safe for the web") fonts are fonts that are common among all versions of Windows, Mac, and Linux.
It's recommended to use websafe fonts, otherwise the browser will substitute the font with another font and this will affect the layout.
Related tutorial: http://wysiwygwebbuilder.com/webfonts.html

Give the textbox some extra space.
Some browsers show the text a little larger and others browsers show the text a little smaller. It's usually not much but you have to leave some space at the end otherwise the last word in a textline may jump to the next line.

User avatar
Pablo
 
Posts: 19375
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Update for WYSIWYG Web Builder 9

Post by Pablo » Tue Nov 15, 2011 9:20 pm

WYSIWYG Web Builder 10 has several new built-in tools in an attempt to more accurate text rendering (although there still will be differences between browsers!)

1) The text object now has 3 different output formats:
Default /Classic Mode
All code will be inside one div. This should be ok for most standard page layouts with not too much text.

Use <div> for each line (DEPRECATED -> NOT RESPONSIVE!)
Each line will be embedded inside its own <div> with its own styling. This gives more accurate results in some occasions.

Use <div> with position for each line (DEPRECATED -> NOT RESPONSIVE!)
Each line will be embedded inside its own div and includes position/size information (previously known as Optimized for Firefox/Safari mode).
A common problem with Mozilla based browsers is that they do not handle large text blocks in combination with CSS absolute positioning very well.
This option attempts to overcome this problem by breaking up the text into multiple <div> elements. This will result in better layouts, but also increases the amount of generated code.

Note:
There is not really a preferred output format because it all depends on your layout, so you should try what works best for you. And test it in all popular browsers to find the optimal solution.

2) You can also set the Line spacing to specific values (in steps of 0.1) to the control distance between lines in the text or use Letter spacing to sets the amount of additional space between letters in the text. Both options can be found in the Format menu.

3) If you want justified text (Align->Justify) then you must set output format to either 'Default' or 'Use <div> with position for each line'!

There is also an option for 'font-fine tuning'. This make it possible to 'fine-tune' fonts in steps of 0.1 pixels.
This may help fix compatibility issues with some fonts that are rendered larger in some browsers and make sure the text does not wrap to the next line.

UPDATE (recommended option for RWD):
In version 10.2 we have added a new output format to the text properties: Include line-height in text styles
If you select this option then WYSIWYG Web Builder will calculate the line-height for each font (based on the rendering in the workspace) and add it to the CSS style. In many cases this will give very accurate results in various browsers with minimum of code.
When using this option the text also remains responsive!

User avatar
Pablo
 
Posts: 19375
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: How to optimize text for different browsers?

Post by Pablo » Mon Aug 21, 2017 11:51 am

Note that if you use Layout Grids (floating layout) then the layout will automatically be moved/scaled, so there in that case the difference in text rendering of browsers will not be an issue.

Locked

Who is online

Users browsing this forum: No registered users and 1 guest