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

Docs: CSS 'hyphens: auto' doesn't work properly on Chrome #8879

Closed
wants to merge 1 commit into from

Conversation

hugovk
Copy link
Contributor

@hugovk hugovk commented Sep 14, 2020

Before

There's a problem in Chrome (and Opera) that hyphens: auto doesn't work properly (macOS/newest Chrome 85/newest Opera 70).

Here's a page I was recently looking at https://pip.pypa.io/en/stable/development/release-process/ and you can see more often than not the hyphenation is broken:

image

Newest Firefox 80 and Safari 13.1 work okay (let me know if you'd like screenshots).

After

This PR suggests adding some custom CSS to use hyphens: none instead, so no hyphens and no broken hyphenation:

image

Let me know if you'd like before/after screenshots on other operating systems/browsers.


Does this need a news fragment or trivial label?

@uranusjr
Copy link
Member

Chrome claims to support hyphens: auto on macOS, I don’t think pip’d documentation need to fix browser bugs.

@uranusjr
Copy link
Member

uranusjr commented Sep 14, 2020

Or maybe the real issue is Sphinx not setting the lang attribute correctly?

https://adrianroselli.com/2015/01/on-use-of-lang-attribute.html

@pradyunsg
Copy link
Member

I think what we should do is change the theme entirely. ;)

@pradyunsg
Copy link
Member

That said, I'd much rather we fix this upstream in whichever theme this rule is coming from.

@hugovk
Copy link
Contributor Author

hugovk commented Sep 14, 2020

Chrome claims to support hyphens: auto on macOS, I don’t think pip’s documentation need to fix browser bugs.

It's been broken in Chrome for at least the 4 years of this issue:

Chrome accounts for around 66% of the global browser market share, so it makes sense for pip's docs to be work properly with it.


Or maybe the real issue is Sphinx not setting the lang attribute correctly?

adrianroselli.com/2015/01/on-use-of-lang-attribute.html

The pages already has lang correctly set:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

I think what we should do is change the theme entirely. ;)

That's one way! :)


That said, I'd much rather we fix this upstream in whichever theme this rule is coming from.

Yup, good idea, will hunt it down and report back.

This PR would be a quick workaround in the meantime, but feel free to close it too. Thanks!

@uranusjr
Copy link
Member

It's been broken in Chrome for at least the 4 years of this issue:

Quoting the description:

Issue 605840 supported automatic hyphenations for Android and Mac, and all hyphens values for all platforms. This is a tracking bug to support automatic hyphenations for other platforms.

So there’s something wrong since you said this does not work on macOS.

@hugovk
Copy link
Contributor Author

hugovk commented Sep 14, 2020

Yeah, I think it might be a font thing.

I've narrowed this down to at least https://github.com/python/python-docs-theme, and it can also be seen, for example, at https://devguide.python.org/setup/:

image

Here's a minimal repro HTML file:

<html lang="en">
  <head>
     <style>
         body {
             font-family: 'Lucida Grande', Arial, sans-serif;

             max-width: 800px;

             -moz-hyphens: auto;
             -ms-hyphens: auto;
             -webkit-hyphens: auto;
             hyphens: auto;
         }
     </style>
  </head>
  <body>
<p>The pip project has a release cadence of releasing whatever is on <code>master</code>
every 3 months. This gives users a predictable pattern for when releases
are going to happen and prevents locking up improvements for fixes for long
periods of time, while still preventing massively fracturing the user base
with version numbers.</p>
<p>Our release months are January, April, July, October. The release date within
that month will be up to the release manager for that release. If there are
no changes, then that release month is skipped and the next release will be
3 month later.</p>
<p>The release manager may, at their discretion, choose whether or not there
will be a pre-release period for a release, and if there is may extend that
period into the next month if needed.</p>
<p>Because releases are made direct from the <code>master</code> branch, it is essential
that <code>master</code> is always in a releasable state. It is acceptable to merge
PRs that partially implement a new feature, but only if the partially
implemented version is usable in that state (for example, with reduced
functionality or disabled by default). In the case where a merged PR is found
to need extra work before being released, the release manager always has the
option to back out the partial change prior to a release. The PR can then be
reworked and resubmitted for the next release.</p>
  </body>
</html>

It seems to be some combination of Lucida Grande on macOS Chrome/Opera. Again, Safari and Firefox are good.

If I remove Lucida Grande, then Arial hyphenates fine for all browsers, as does Lucida Sans and the default font when removing font-family: completely.

@hugovk
Copy link
Contributor Author

hugovk commented Sep 14, 2020

Aha! Here's the Chromium bug! Still open since Nov 2019.

Which includes a comment that it happens on docs.python.org, was filed as its own bug 1029214, set as duplicate of 1015297, and "fixed", but I can still reproduce it at the same docs.python.org page.

I added a comment at 1029214.

@hugovk
Copy link
Contributor Author

hugovk commented Sep 16, 2020

Update: 1029214 has been reopened, and I created PR python/python-docs-theme#54 to ditch Lucida Grande, at least until the Chrome bug is fixed and widely deployed.

@hugovk
Copy link
Contributor Author

hugovk commented Oct 24, 2020

Closing this, Chrome has now fixed this in Canary 88.0.4300.0!

I've confirmed it working for https://pip.pypa.io/en/stable/development/release-process/ in Canary Version 88.0.4301.0 (Official Build) canary (x86_64) on macOS (and still repro on older Chrome 86).

Chrome 88 is due out on 2021-01-19: https://www.chromestatus.com/features/schedule

Thanks for the help!

@hugovk hugovk closed this Oct 24, 2020
@hugovk hugovk deleted the docs-fix-hyphens branch October 24, 2020 07:49
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants