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

Issue with vert feature not working in macOS/iOS #8695

Open
NightFurySL2001 opened this issue Dec 6, 2024 · 9 comments
Open

Issue with vert feature not working in macOS/iOS #8695

NightFurySL2001 opened this issue Dec 6, 2024 · 9 comments

Comments

@NightFurySL2001
Copy link
Contributor

The font in use is LXGW WenKai TC

Describe the bug

When displaying LXGW WenKai TC on Apple devices (eg Safari and Google Chrome on iPad), the OpenType vert feature is not triggered. This caused vertical punctuations to fail to rotate. This issue does not appear on Windows/Linux devices.

iPad Safari:
Image

To Reproduce

Open the HTML file in Apple devices and compare to Windows/Linux devices.

Replication HTML
<html>
    <head>
        <meta charset="utf8" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC:wght@300;400;700&display=swap"
            rel="stylesheet"
        />
        <meta viewport="width=device-width, initial-scale=1, minimum-scale=1" />
        <style>
            html,
            body {
                height: 100%;
            }
            body {
                font-family: "LXGW WenKai TC", sans-serif;
                writing-mode: vertical-rl;
                height: 100%;
                font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "vert" 1;
            }
        </style>
    </head>
    <body lang="zh">
        <h1>测试</h1>
        <p>
            ABCD這~是!鍵·盤#上¥的%全……形—標*點(符)號——橫+排`豎-排=的「顯」示【情】況:一;點“明”體‘與’其『他』字,體「對」比?自、動|橫/變豎。
        </p>
    </body>
</html>

Expected behavior

Punctuations in OpenType vert feature are triggered.

Google Chrome on Windows:
Image

@aaronbell
Copy link
Collaborator

I used the test html data that you provided and was not able to repro the bug on a Mac system (testing in both Firefox / Chrome) on 12.7.5. Can you clarify which version of Mac OS that you are encountering the issue on? (note that in the images below, the ellipsis are not rotating, which is probably a shaping limitation, as I verified that glyph is present and rotates under the vert feature).

Image

@NightFurySL2001
Copy link
Contributor Author

NightFurySL2001 commented Dec 7, 2024

Seems to only be problematic in Safari. iPad browsers are all using Safari/WebKit, so probably the same issue.

Screenshot from two users:

Monterey 12.7.6

Safari:
Image
Chrome:
Image
Firefox 133.0:
Image

Sequoia 15.1

Safari:
Image
Chrome:
Image

P/S: Apart from ellipsis not rotating, the quotation marks are substituted and rotated. It should only be substituted but not rotated, probably another weird edge case given the shared codepoint.
Image

@aaronbell
Copy link
Collaborator

Thanks for the comments. So a couple of notes. Safari does not allow users to manually turn on or off the vert feature, so it follows that trying to set that feature in CSS would not result in any change. However, that isn't to say that Safari doesn't enable vertical typesetting.

Using writing-mode: vertical-rl does appear to turn on the vert feature in other fonts (like Noto Serif TC, and Reggae), but doesn't for LXGW Wen Kai. I tried adding the vrt2 feature, which didn't have any effect, and aalt which also had no impact. It appears to have the same codepage and unicode plane coverage as Noto Serif TC, so I'm a little at a loss as to the reason the rotation is not occurring.

Clearly Safari is looking for something that is not present. Interesting, Klee itself is working fine, but the upstream version of Wen Kai also fails.

@aaronbell
Copy link
Collaborator

Ned pointed me to that it may be the issue is that not all languagesystems have vert declared. Investigating…

@aaronbell
Copy link
Collaborator

I reworked the feature code and was able to resolve the issue with the vert table.

Image

As for the quote marks, that appears to be an issue across the board with Chrome, and I'm observing that behavior in many other fonts as well :/. Anyway, I think I'll go ahead and submit a PR fix for LXGW WenKai to address the problem. Thanks!

@NightFurySL2001
Copy link
Contributor Author

Thank you. What was the exact issue with the vert table?

@aaronbell
Copy link
Collaborator

There wasn’t an issue with the vert table per se, but rather needing to work around Safari’s mechanism of shaping text.

The way that the feature is set up, vert is included in the DFLT, hani, and kana languagesystem, and not included in latn or grek. Normally this shouldn’t be an issue since the vert code is only actually applicable for vertical typesetting.

However, my suspicion is that Safari applied the OpenType features prior to actually shaping the text or knowing what language is being used, and that it assumed latn. So as a result it didn’t see any vert rules to apply.

The fix was to remove all language-specific rules from all the OT features, and only include DFLT. I didn’t see anything that looked like it needed to differ between the languagesystems so this was the simplest way to enact a change.

@NightFurySL2001
Copy link
Contributor Author

I see. Since FontCreator requires at least one language and script, will including vert in latn and grek works in Safari?

@aaronbell
Copy link
Collaborator

I think so? Couldn't you also just do DFLT/dflt? That would be simpler than having to put every language and script.

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

Successfully merging a pull request may close this issue.

2 participants