HI,
there are fundamental differences between the way Freeway displays HTML text and the way in which the browser displays it. Using CSS, it is possible to be very precise in controlling the browser. However, Freeway seems to get HTML text drawing wrong, and this can cause layout problems with the browser.
I did some tests a while back, and found that the problem is down to the way in which leading in handled by Freeway. It’s different to how the browsers show it. It is considered good practice for accessibility to define leading values as a % rather than as an absolute pixel dimension. If the browser scales the text, and the leading is defined using a px value, the text will run into itself. If it’s defined as a percentage, the leading will expand proportionately, leading to readable text at any size.
Freeway seems to be unable to display the correct leading when it’s defined as a percentage. Take this Freeway layout:
And just for good measure, here is the same image, but with some measurements:
Note that 150% of 12px is 18px, so the text in both boxes SHOULD occupy the same vertical height as the text set with absolute (px) based units of measurements. You will notice that Freeway does not perform this calculation correctly.
This is how Freeway presents the text.
Let’s see how it looks in Safari:
As you can see, the space the text occupies has shrunk. I put black borders on the boxes so you can see by how much. Safari correctly calculates the leading for the % leading text:
As does Firefox:
And IE7:
Well, that seems to work.
And IE8:
Even IE6 gets it right:
I have worked out a fix for this which should be good for the time being. Ideally, this should be addressed by Softpress as Freeway’s eccentric leading calculations means that layouts that rely on the vertical spacing that text occupies will be more accurate. I have lost count of the times clients have asked me to add in more content because of a large white gap under some text - a gap that in Freeway does not exist.
The fix relies on Freeway accurately displaying leading that is px based, but publishing overrides.
1 - Create your text style in Freeway. In leading, use px as the unit of measurement for leading. Freeway will default the leading box to 100% - promoting % as the unit of measurement. Make sure your px value is the correct result of multiplying your text size by the % value of the leading you intend to use.
2 - Click the Extended button
3 - Click the New… button in the window that appears
4 - Type in “line-height” (omit the quotes) in the name and your % value in the value field:
(NB - Freeway normally publishes the line-height as a decimal - so 150% will become 1.5 - you can use this value here with the same results)
When Freeway builds the site, it will use your extended values in preference to the defined ones in the style editor. The CSS produced will look something like this:
.replacedLeading { font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; line-height:150% }
or, if you used 1.5 instead of 150%:
.replacedLeading { font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12px; line-height:1.5 }
In effect, what you are doing is tricking Freeway into displaying the intended CSS leading at design time, and publishing the % value. The result is a more controllable design.
This method may work if you need to use % values for other CSS settings - I have not tested this. I am not sure if it’s absolutely neccessarty to do this elsewhere.
Anyway, hopefully this will be of use to someone out there.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options