Published article renders differently...

User 404575 Photo


Registered User
887 posts

I just stumbled semi-blindly through the design and added this article to my site.
https://denverprocessservers.net/shoppi … erver.html

The weird thing is that it renders differently in RSD 1.5, Chrome, and Firefox.

Yet W3C says it's fine and dandy.
Melissa Rhiannon
OS Windows 10
User 2699991 Photo


Registered User
5,391 posts

Melissa Rhiannon wrote:
I just stumbled semi-blindly through the design and added this article to my site.
https://denverprocessservers.net/shoppi … erver.html

The weird thing is that it renders differently in RSD 1.5, Chrome, and Firefox.

Yet W3C says it's fine and dandy.


it depends on which version of firefox some of the older versions don't like % values for text (or the containers holding then

Om my firefox/google here (both the latest versions, it renders the same no problem,
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 404575 Photo


Registered User
887 posts

Chrome too, Wayan.

It renders ok when I test it from RSD 1.5 in Chrome, but NOT when I upload it and use Chrome.
Melissa Rhiannon
OS Windows 10
User 379556 Photo


Registered User
1,602 posts

Googling 'helvetica neue font rendering' reveals that it is not a good font choice if one wants constistent rendering in different browsers, and gives technical explanations.

To avoid the problem I would avoid that font.

Frank
User 122279 Photo


Senior Advisor
14,647 posts

Helvetica Neue is not automatically understood by all browsers. If it is not, the browser will choose some other font that they 'think' will be right. The easiest way to avoid such display differences is to choose a 'web safe' font, or in SD3 a Google font.
When I say 'the easiest', I mean that other fonts can be used, but that includes creating a 'font pack' at e.g. FontSquirrel, which is prone to create problems if you don't know your way around it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 404575 Photo


Registered User
887 posts

Whoa. RSD shows everything being in Arial.

I created the new page by duplicating one of the others. Something somewhere is telling it to render in Helvetica Neue?

That could explain why it renders fine in RSD, but hinky in the browsers...

Melissa Rhiannon
OS Windows 10
User 379556 Photo


Registered User
1,602 posts

The main.css file shows the following for paragraphs on the page referred to -

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;

This use of multiple font names in a font-family property is a fallback system: if the browser doesn't support the first font, it tries the next one, and so on. Different browsers may well therefore render differently.

One can check which font-family properties are being used by RSD for a paragraph or other text element by looking at the 'Your CSS (Read Only)' section below the Elements Tree while that element is selected.

Frank
User 122279 Photo


Senior Advisor
14,647 posts

It's strange, even if you select Herlvetica as your font, you get Helvetica Neue as the first choice. This must be wrong! Helvetica is more commonly supported than the 'Neue' version. A font stack should start with the most common font, then the 2nd most common etc. Tahoma would be a better choice, me thinks.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,602 posts

Inger wrote:
A font stack should start with the most common font, then the 2nd most common etc.

... or perhaps the nearest to what is desired, the next nearest etc. and ending with the generic family?

Frank
User 122279 Photo


Senior Advisor
14,647 posts

Yes, that is what I mean. And adding in Tahoma or Geneva into the stack would hurt. Have you seen that even if you select Helvetica as your font, that is not what you get, it will be Helvetica Neue.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.