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.

Sign up for GitHub

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

Jump to bottom

[Feature]: Support hyphens: auto; #34067

Open
EMaderbacher opened this issue Dec 18, 2024 · 4 comments
Open

[Feature]: Support hyphens: auto; #34067

EMaderbacher opened this issue Dec 18, 2024 · 4 comments
Assignees
@mxschmitt
Labels
browser-chromium v1.50

Comments

@EMaderbacher
Copy link

🚀 Feature Request

When I'm executing playwright with

var browser = await this._Playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions()
{
	Headless = true,
});

the CSS hyphens: auto; is working.
But when I'm running it not headless, the CSS isn't working. No automatic hyphens are shown.

I've seen that Chromium headless has a folder hyphen-data, but Chromium doesn't have this folder.
Is there any way to get hyphens: auto working with Chromium too?

Example

No response

Motivation

Supporting hyphens: auto; will result in same output as in standard browsers
@mxschmitt mxschmitt transferred this issue from microsoft/playwright-dotnet Dec 18, 2024
@mxschmitt
Copy link
Member

Which operating system are you on? Would it possible to share a minimal reproduction with us? I tried the following which was producing the same screenshot for headless and headed for me:

import { test, expect } from '@playwright/test';

test('verify hyphenation in headless mode', async ({ page, headless }) => {
  await page.setContent(`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <style>
          .hyphenated {
            width: 200px;
            hyphens: auto;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
            text-align: justify;
            border: 1px solid black;
            padding: 10px;
          }
        </style>
      </head>
      <body>
        <div class="hyphenated">
          This is a significantly long word: supercalifragilisticexpialidocious
        </div>
      </body>
      </html>
    `);

  await page.screenshot({ path: headless ? 'headless.png' : 'headed.png' });

  // Get computed style
  const hyphensSetting = await page.$eval('.hyphenated', el => window.getComputedStyle(el).hyphens);

  // Verify hyphenation is enabled
  expect(hyphensSetting).toBe('auto');

  // Get the rendered text content and check for soft hyphens
  const textContent = await page.$eval('.hyphenated', el => el.innerHTML);
  console.log('Headless text content:', textContent);
});

@EMaderbacher
Copy link
Author

I'm in the C# world so a small repro for C#:

private static async Task PlayWrightTest(bool headless)
{
	IPlaywright playwright = await Playwright.CreateAsync().ConfigureAwait(false);
	IBrowser browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions()
	{
		Headless = headless,
	}).ConfigureAwait(false);

	IPage page = await browser.NewPageAsync().ConfigureAwait(false);
	await page.SetContentAsync("""
		<!DOCTYPE html>
				<html lang="en">
				<head>
				<style>
				    .hyphenated {
				    width: 200px;
				    hyphens: auto;
				    -webkit-hyphens: auto;
				    -ms-hyphens: auto;
				    text-align: justify;
				    border: 1px solid black;
				    padding: 10px;
				    }
				</style>
				</head>
				<body>
				<div class="hyphenated">
				    This is a significantly long word: supercalifragilisticexpialidocious
				</div>
				</body>
				</html>
		""").ConfigureAwait(false);
	byte[] result = await page.PdfAsync().ConfigureAwait(false);
	File.WriteAllBytes(headless ? "Headless.pdf" : "Headed.pdf", result);
}

In headless PDF is shown a hyphen, in headed not.

My environment is:

  • Windows 11 24H2
  • Playwright v1.49
  • .NET 8

@mxschmitt
Copy link
Member

I was able to reproduce. Might be Windows only.

Investigation:

  • This is a regression between v1.49 and v1.48 when we were spitting up chrome and headless_shell CR targets. Our headless build includes the hyphen-data now but our normal chrome builds don't.
  • Pre v1.49 we didn't include any hyphen-data in our chromium builds
  • Official CfT builds include hyphen-data and their headless_shell as well
  • Upstream it looks like //third_party/hyphenation-patterns is only used inside chrome tests. Also Google Chrome does not have any hypthen-data included.
  • Action item: We should try to disable it.
  • The switch is this one - setting headless_use_embedded_resources = true might have other side effects which we don't want.

Proposal:

    echo 'headless_use_embedded_resources = true' >> ./out/Default/args.gn
    # When using headless_use_embedded_resources we also need to set headless_enable_commands to false
    echo 'headless_enable_commands = false' >> ./out/Default/args.gn

We could also just ignore the hyphen-data folder and don't archive it - that will work as well.

@EMaderbacher
Copy link
Author

Correct, in versions before v1.49 it wasn't working at all.
I was suprised that it was working after upgrading to v1.49 with headless shell.

I found several places where that problem is mentioned, may one can help a little bit:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mxschmitt mxschmitt

Labels
browser-chromium v1.50
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pavelfeldman @EMaderbacher @mxschmitt