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

Enable subpixel hinting for fonts in the documentation #209

Open
nilslindemann opened this issue Dec 27, 2022 · 0 comments
Open

Enable subpixel hinting for fonts in the documentation #209

nilslindemann opened this issue Dec 27, 2022 · 0 comments

Comments

@nilslindemann
Copy link

If you apply these styles to the docs, then the fonts will look sharper:

html {
    background: white;
}

/* Just using '*' has unwanted side effects on the search entry. */
.md-container, .md-container *,
.md-header__inner,
.md-header__title, .md-header__title *,
.md-header__source, .md-header__source * {
    background: inherit;
}

/* Also enables subpixel-rendering for the heading in the menu on the left side */
.md-nav--primary .md-nav__title {
    box-shadow: revert;
}

The fonts will look sharper due to subpixel hinting. Chrome will (can?) only use subpixel hinting, when the background of the layer containing the font is non-transparent. Therefore, I set the background of the html element to white and let the child elements inherit it (which may be too intrusive, I have not extensively tested it).

Here is a screenshot, I hope you can see the effect.

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

No branches or pull requests

1 participant