Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

widont filter causes weird spacing (Chrome-specific) #42

Open
joshkehn opened this issue May 15, 2015 · 6 comments
Open

widont filter causes weird spacing (Chrome-specific) #42

joshkehn opened this issue May 15, 2015 · 6 comments

Comments

@joshkehn
Copy link

The widnot filter adds a   to heading (h1, h2, etc) tags and this causes display issues on Chrome. The solution I would propose is to turn off adding this   either as an option or the default. I'm also open to ideas for fixing this issue if it might be style related but I haven't had much luck with that.

Safari

Here's an example of the widnot filter rendering properly in Safari (Version 8.0.4 (10600.4.10.7)).

screen shot 2015-05-15 at 3 29 35 pm

screen shot 2015-05-15 at 3 31 44 pm

Chrome

Here's that same page rendering in Chrome (Version 42.0.2311.152 (64-bit)).

screen shot 2015-05-15 at 3 32 22 pm
screen shot 2015-05-15 at 3 32 46 pm

@chrisdrackett
Copy link
Collaborator

Hm, this is new to me. Seems like potentially a browser bug, but I'd have to dig deeper. I created a quick test case and I'm not seeing this behavior. I'm wondering if this is potentially linked to the font you are using?

@ryneeverett
Copy link

Are you sure it's the same html in both cases? It's hard to imagine there's both a Safari bug that lies to you by replacing the escape code with a regular space and a Chrome bug that makes non-breaking spaces twice as wide as regular spaces.

@joshkehn
Copy link
Author

@chrisdrackett Might be a typeface issue actually. Here's a screenshot (it's Hoefler Text) from Safari (left) and Chrome (right)

screen shot 2015-05-15 at 4 45 22 pm

HTML for that page:

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
    <style type="text/css">
        * { font-family: "Hoefler Text", "Adobe Garamond Pro", "Garamond", "Palatino", "Georgia", serif; }
    </style>
</head>
<body>
<h1>This Example&nbsp;Heading</h1>
<p>Examine the heading above.
</body>
</html>

@joshkehn
Copy link
Author

May be related to Chromium issue #454108

@joshkehn
Copy link
Author

Either way, an option to turn this off for headings would be nice. Would a PR for that be accepted?

@chrisdrackett
Copy link
Collaborator

PR's are always acceptable :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants