texts and IE9, Firefox, Chrome and the like...

[[RZ]]

Hi all!

After a lot of issues I've read here (and I myself had) about the text height differences between browsers (rendering), wanted to share with you my modest solution that worked fine for me.

This is applicable if you want to make use of the new features in IE9. So, go to Page Properties / Internet Explorer -> Compatibility: None

For our example we will use "trebuchet ms" font, the one I most use and has the most visible differences.

1. drag and drop a text object
2. type in a few lines in it
3. select all the text and set: font -> "trebuchet ms" size "10"
4. preview in (let's say) chrome, all is ok, as in edit mode
5. now preview in IE9, you will see a sort of smaller space between each line, a "smaller" text

A simple solution:

1. go to menu -> format -> styles...
2. in style manager -> add...
3. set the following:
3.1 style name: i.e. "content-normal"
3.2 font / fontname: trebuchet ms
3.3 font / fontsize: 10
3.4 general / customstyles: line-height:18px;
4. click ok twice
5. double click the text object in order to go to edit mode
6. select all the text and in the styles' combobox select content-normal (the one used in our sample)
7. preview in (let's say) chrome, all is ok, as in edit mode
8. now preview in IE9, if you followed these simple steps, you will see your typed text as expected (also in mac or in any other "normal" browser)

Please note:

1. fontsize is closely related with its line-height, so change appropriately the pixels amount in the line-height (customstyles-property) if you changed the fontsize property.
2. this solution works in preview/publish mode only, not in editing mode.

Hope this helps!
Best regards to you all.

[protectourlands]

Good news RZ. You can now set line height in WB8 styles. It is an included variable.

[[RZ]]

with all due respect my friend, but you have a little mistake.
the property you are saying in styles manager is "like" percentages:
1.1, 1.5, 2.0 -> +10%, +50%, +100%
what i meant is cross-browser near pixel perfect height and not proportional height (or interline space).
in your way you will have the same [proportionally] issue between browsers and platforms.
so the line-height in pixels closely related to font-size in pixels, will workaround the rendering differences between browsers like IE8, IE9, mac, among others.
if you follow step by step my humble suggestion you won't need to use ie8 emulation, so you will be able to use the ie9 new features and will render the text the same in almost all browsers.
(also you will be able to use full text-justification)
hope you got the point now!
best regards friend.

[BaconFries]

RZ isnt what you have posted just the same as what gofrank posted over a year ago???
Sat Jul 10, 2010 2:56 pm
viewtopic.php?f=26&t=30802&hilit=gofrank

[[RZ]]

@baconfries
i searched all over the forum and asked too many questions about this, also support told me that is impossible to make the browsers render the same way... (from when ie9 was in beta mode)
so, i tried too many workarounds, and only this solved my issue.
pity didn't find this valuable post i was searching for during months!
ie9 broke my head and my patience
now you found it for me, please delete all this thread.

@gofrank
congratulations for you original post, didn't find your valuable suggestion when i needed.

@everyone
my apologies

(anyhow, i think this may avoid confusion with line height like 1.1, 1.2, etc with line height in pixels...)

[BaconFries]

No need for apoligies my friend ....it was good that you took the time to write what you wrote.... I am sure it will be useful to others...

[protectourlands]

I see issues with this attribute and the HTML5 doc type. Probably better to use "height" instead.

I notice there is a new option to apply separate div tags and positioning to each line in WB8. This might be a better option in the new doctype.

[[RZ]]

didn't try html5 yet, but using divs in each line you won't be able to justify text (left and right).

[protectourlands]

Yeah I see that. Bummer.

I've been using this attribute for all my HTML4 sites with excellent results. It doesn't seem to work in HTML5 though. The text outputs with much larger spacing than expected in all browsers using HTML5 doc type. The only way I have been able to output text in HTML5 doc type with normal spacing is to use the div with positioning fix.

Maybe support knows the reason for this.

[[RZ]]

you can do it via code (or with custom styles).
take in count that the text shadow is not fully supported, like in internet explorer (as usual).

because your question is not related to this thread, also please note the following:

from the forums' list:

WYSIWYG Web Builder Tips, Tricks, Tutorials and Code Examples
Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).

from the forum rules:

This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

[katman]

Hi all!

After a lot of issues I've read here (and I myself had) about the text height differences between browsers (rendering), wanted to share with you my modest solution that worked fine for me.

This is applicable if you want to make use of the new features in IE9. So, go to Page Properties / Internet Explorer -> Compatibility: None

For our example we will use "trebuchet ms" font, the one I most use and has the most visible differences.

1. drag and drop a text object
2. type in a few lines in it
3. select all the text and set: font -> "trebuchet ms" size "10"
4. preview in (let's say) chrome, all is ok, as in edit mode
5. now preview in IE9, you will see a sort of smaller space between each line, a "smaller" text

A simple solution:

1. go to menu -> format -> styles...
2. in style manager -> add...
3. set the following:
3.1 style name: i.e. "content-normal"
3.2 font / fontname: trebuchet ms
3.3 font / fontsize: 10
3.4 general / customstyles: line-height:18px;
4. click ok twice
5. double click the text object in order to go to edit mode
6. select all the text and in the styles' combobox select content-normal (the one used in our sample)
7. preview in (let's say) chrome, all is ok, as in edit mode
8. now preview in IE9, if you followed these simple steps, you will see your typed text as expected (also in mac or in any other "normal" browser)

Please note:

1. fontsize is closely related with its line-height, so change appropriately the pixels amount in the line-height (customstyles-property) if you changed the fontsize property.
2. this solution works in preview/publish mode only, not in editing mode.

Hope this helps!
Best regards to you all.

Thanks for the reply. I am concerned with those who are not using ie9 though. The format will still be a mess for them

[[RZ]]

Thanks for the reply. I am concerned with those who are not using ie9 though. The format will still be a mess for them

This is applicable for [almost] all browsers...