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

render issues #22

Open
longfeiss opened this issue May 5, 2022 · 10 comments
Open

render issues #22

longfeiss opened this issue May 5, 2022 · 10 comments
Labels
bug Something isn't working

Comments

@longfeiss
Copy link

Thanks for your pretty theme.

There is a render issue when use a different customer font in Safari and mobile.
image

No problem in Chrome.

image

custom.css

@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');

#wrapper {
    font-family: 'LXGW WenKai', "Times New Roman", serif
}
@queensferryme queensferryme added the bug Something isn't working label May 6, 2022
@queensferryme
Copy link
Owner

No problem in Firefox here too. Am looking into the issue.

queensferryme added a commit that referenced this issue May 6, 2022
@queensferryme
fix: deprecated break-word not working in Safari (#22)
da434c0 
see https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
@queensferryme
Copy link
Owner

Please update the theme and see if it is fixed.

@longfeiss
Copy link
Author

longfeiss commented May 7, 2022 •
edited
Loading

Thanks for your response, it works.

But there are two places are remaining not rendered properly, can you take a look?

image

The title should be rendered in one line.

image

Same problem.

@queensferryme
Copy link
Owner

题外话：霞鹭文楷的粗体和常规体区分度不明显，有时候不仔细查看都无法发现某段文字有加粗。因此个人并不建议你使用这种字体。

@queensferryme
Copy link
Owner

queensferryme commented May 7, 2022 •
edited
Loading

@justlongfei

TLDR:
use font-family: 'LXGW WenKai' instead of font-family: 'LXGW WenKai', 'Times New Roman', serif.

Long explanation:

I believe this bug belongs to Safari or LXGW Wenkai. But I don't have the time to dig into the root cause right now.
I can't fix this bug, but you can avoid the bug with font-family: 'LXGW WenKai' instead of font-family: 'LXGW WenKai', 'Times New Roman', serif (somehow, I don't know why).
A minimal reproducible example:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        @import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');

        #wrapper {
            display: flex;
            font-family: 'LXGW WenKai', serif;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <h1>
            <a href="/">Any Text with Word-Breaks</a>
        </h1>
        <h1>
            <a href="/">OK_When_No_Word_Breaks</a>
        </h1>
    </div>
</body>

</html>

Renders like this on Safari:
图片

@longfeiss
Copy link
Author

similar issue rsms/inter#321

@longfeiss
Copy link
Author

image

@longfeiss
Copy link
Author

I don't know, maybe really hit WebKit's bug.

@benjaminv
Copy link

benjaminv commented May 8, 2022 •
edited
Loading

Renders like this on Safari: 图片

It appears to be some bug introduced by the cdn stylesheet however I did not study this through.
To fix, do something like following to the H1 tag, for instance apply flex:auto, to make them share the full width of flex container therefore reduce chances of getting word-wrapped. Its inner a tag natively has no width creates a log of problems among different browsers.

#wrapper {
            display: flex;
            font-family: 'LXGW WenKai', serif;
            background-color: blueviolet;
            /* justify-content: space-around; */  /* not needed if inner elements have flex-grow and basis */
            /* white-space: nowrap; */  /* result unnecessary overflow */
        }
        h1:first-of-type {
            background-color: lightblue;
        }
        h1:last-of-type {
            background-color: lightgreen;
        }
        h1 {
            flex: auto;
            text-align: center;
        }

@longfeiss longfeiss mentioned this issue May 31, 2022
Open
@lxgw
Copy link

lxgw commented Jun 1, 2022 •
edited
Loading

题外话：霞鹭文楷的粗体和常规体区分度不明显，有时候不仔细查看都无法发现某段文字有加粗。因此个人并不建议你使用这种字体。

感谢您的反馈，粗体本来是作为 Medium 字重，后因为有用户提议才将 Medium 改为 Bold 字重（lxgw/LxgwWenKai#37）。之后的版本会考虑调整，Bold 将改回 Medium，Light 将改为 SemiLight。
image

而在此基础上加粗调整的 臻楷 依然有很多人觉得细，或许有原字体比较细的原因，主要还是我在字重的选择上太保守了，直接机械加粗又怕糊掉。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@benjaminv @queensferryme @lxgw @longfeiss