search

metalsmith / metalsmith.io

The site for Metalsmith.
https://metalsmith.io
172 stars 112 forks source link

Text wrapping in code examples on site #264

Closed agnesesterhuizen closed 5 years ago

agnesesterhuizen commented 6 years ago

The elevator pitch code example and some other examples on the site have their right hand side comments wrapping over to the next line which makes it difficult to read the code. It seems to wrap fine on the smaller breakpoint

Screenshot: metalsmith

Ajedi32 commented 6 years ago

What browser/OS are you using? It doesn't look that way for me:

Code with no wrapping

Ajedi32 commented 6 years ago

Looks like it might have something to do with the font being used on your PC. Maybe we need to be more specific in the CSS about what font we're using...

agnesesterhuizen commented 6 years ago

I am on macOS Sierra viewing the site in Chrome but text is wrapping this way in Firefox and Safari too. I tried out some other monospace fonts in the devtools and it is still wrapping. I found that lowering the font size slightly is fixing it so maybe it has something to do with how the font is being rendered on my side

axe312ger commented 6 years ago

How about a white-space: no-wrap; and overflow: scroll;?

axe312ger commented 6 years ago

Fixing it by changing the font size / font family is no real solution. You can't test on all potential devices/browsers

Ajedi32 commented 6 years ago

If we use a specific font loaded via web fonts then all browsers which support web fonts should display the text exactly the same.

overflow: scroll; might still be a good idea, just in case, but I'd prefer it if most users don't have to scroll to see all code in that box.

axe312ger commented 6 years ago

which support web fonts should display the text exactly the same.

Nope, sorry, thats wrong. Font rendering differs from OS type, version, configuration AND zoom level of the user. Even with the exact same font type and size in css.

but I'd prefer it if most users don't have to scroll to see all code in that box.

I am with u, sane default settings, but still, should always work, for everybody on any device

ismay commented 5 years ago

@andrewesterhuizen I've tried to reproduce this, but wasn't able to. Are you still encountering this with the current site? We've made some changes, so I'm wondering if that's why I can't reproduce it.

agnesesterhuizen commented 5 years ago

@ismay Just had a look and it seems to be fixed now

screenshot 2018-11-03 at 10 04 52

ismay commented 5 years ago

Nice, thanks for checking. In that case I’ll close it 👍