Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Puppeteer does not honor hyphens:auto

See original GitHub issue

In Chromium 88, support for hyphens: auto was added.

https://www.chromestatus.com/feature/5672891947417600

However when using a puppeteer version that supports chromium 88 or above, hyphens:auto does not behave as expected.

I have downloaded the current version of chrome 88 locally, as well as the beta and canary versions. When viewing a test html file utilizing hyphens: auto in these chrome versions, the behavior works as expected and words are automatically hyphenated when the screen becomes too thin.

However if I boot these SAME executables up using puppeteer, and open the EXACT SAME test file, the hyphen behavior does NOT work as expected, and no hyphens appear.

My example hyphens test file is below.

<html lang="en">
    <div style="word-break: break-word; hyphens: auto;">
    reallylongwordwithnobreaksatall reallylongwordwithnobreaksatall reallylongwordwithnobreaksatall reallylongwordwithnobreaksatall reallylongwordwithnobreaksatall
    </div>
</html>

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: Any, I have tried 5.5.0 - 7.0.1
  • Platform / OS version: Windows/Chrome
  • URLs (if applicable):
  • Node.js version:

What steps will reproduce the problem?

Please include code that reproduces the issue.

  1. Boot up a non-headless version of puppeteer
  2. View the above html file and notice that it does not match what the file looks like when using the corresponding chrome version.

What is the expected result?

Puppeteer should match chrome behavior for hyphens: auto

What happens instead?

Puppeteer does not match chrome behavior for hyphens: auto

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:10

github_iconTop GitHub Comments

1reaction
tassin-gauthiercommented, Feb 15, 2022

If someone need this feature for his product, he can try a look at Hyphenopoly

1reaction
MurakamiShinyucommented, Oct 22, 2021

I got answer from Chromium bugs: https://bugs.chromium.org/p/chromium/issues/detail?id=1261480#c5

Traditional headless mode is a completely different browser implementation that is launched if chrome is started with --headless switch. As such, it supports a very limited subset of components and I don’t think component updater is one of them. We don’t have plans to bring headless chrome feature support any closer to the one of the headful chrome.

Instead, we’re working on a new “native” headless mode that uses the regular chrome browser running without a physical graphics device. It obviously supports everything a regular chrome browser supports.

Native headless mode is still in experimental phase, however, it is available in the stable chrome (only on Linux at this point) if headless mode is activated using the --headless switch specified with ‘chrome’ value (–headless=chrome) or if USE_HEADLESS_CHROME environment variable is set.

The option --headless=chrome (or USE_HEADLESS_CHROME environment variable) on Linux would be worth testing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Baldur Bjarnason on Twitter: "Basically, _all_ of your PDF ...
Turns out that this is a known bug in Chrome headless on Linux. ... Puppeteer does not honor hyphens:auto · Issue #6840 ·...
Read more >
Troubleshooting - Puppeteer
Chrome headless doesn't launch on UNIX​. Make sure all the necessary dependencies are installed. You can run ldd chrome | grep not on...
Read more >
Puppeteer iterates through all pages but browser won't close ...
First you do await page.waitForSelector(".pager .next a"); which will reject if it's not found. Then, on the next line, you try to ...
Read more >
puppeteer-core - npm
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.
Read more >
Puppeteer overview - Microsoft Edge Development
Headless browsers don't display a user interface (UI), so you must use the command line. You can also configure Puppeteer to run full...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

TS2309: An export assignment cannot be used in a module with other exported elements.

Next page

PDF rendering hangs unless page contains the same custom font as header