typogrify
typogrify copied to clipboard
mintchaos
`widont` filter causes weird spacing (Chrome-specific)
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)).
Chrome
Here's that same page rendering in Chrome (Version 42.0.2311.152 (64-bit)).
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?
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.
@chrisdrackett Might be a typeface issue actually. Here's a screenshot (it's Hoefler Text) from Safari (left) and Chrome (right)
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 Heading</h1>
<p>Examine the heading above.
</body>
</html>
Either way, an option to turn this off for headings would be nice. Would a PR for that be accepted?