Viewing Text placement vertical rendering off by several pixels

Text placement vertical rendering off by several pixels



User: John P. 7 years ago
I'm running into an odd problem with text not appearing in my browser as it was laid out in Everweb. Here are several screen grabs to illustrate.

In the first, you see the layout of several objects, including a pair of side-by-side text boxes noting information about a pair of art prints. I've added a black line gauge where the bottom of the text rests in the layout.

In the second, you see the same text boxes and the same black line after publishing the entire site and viewing the page in Safari after emptying in the cache. Note where the text sits in relation to the black line; it's now several pixels lower than where it had been in the Everweb layout. (Also note that the black line intersects the purple hearts at the same vertical position in both screen grabs).

In the third screen shot I've overlaid the browser display atop the Everweb display, so the graphic objects (line, jpeg, stylized text graphic) are aligned, but the text in the browser is clearly lower.

The text boxes are both 180 x 40 pixels and contain Helvetica, Regular, 12pt colored text. Both contain two lines of text with the second line being a hyperlink. More about the text:

Alignment: Center, Top
Character Spacing: 0
Line Height: 1
Before Paragraph: 5
After Paragraph: 1
Inset Margin: 0

I think that's it, but the rendered text is definitely off by 2-3 vertical pixels. (Everweb 2.1.1)

Everweb Layout.jpeg
Layout in Everweb
Safari Render.jpeg
Rendered in Safari
Overlay.jpeg
Side-by-side Overlay
User: EverWeb Support 7 years ago
Hi, John!

Check this article, it might be of help to you: http://billing.ragesw.com/knowledgebase.php?action=displayarticle&id=193

Wayne

-------------------------------
EverWeb Customer Support
Submit Tickets or Learn More
User: John P. 7 years ago
Hi Wayne,
I'm familiar with the knowledgeable article, but even after verifying each of the 4 things noted, the same thing occurs. To further test the problem I created a new page that included only the two text boxes, the heart graphic, and the black line. In the first test I placed the black line one pixel below the first line of text ("Gallery wrapped...") so the bottom of the text baseline rested on the line. When viewed in my browser, the text was displayed one pixel too low, so the black line now fell on top of the text baseline. In the second test I placed the black line one pixel below the second line of text ("Buy it now"), and when viewed in my browser observed that the second line of text was two pixels lower than where it had appeared in Everweb, with the text baseline now falling one pixel below the black line. The same thing happens if I remove the hyperlink from the text. For whatever reason it would appear that text is off by one pixel per line. See above for Inspector details of the text boxes.
User: Martin K. 7 years ago
I've had the same problem for a long time - and have worked around it by adjusting the position of the affected line and text in Everweb so that they appear correctly positioned in a browser - not exactly a desirable state of affairs......

Martin


Post Reply
You must login or signup to post.