How to optimize text for different browsers?
Posted: 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.
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.