planety / prologue

Powerful and flexible web framework written in Nim
https://planety.github.io/prologue
Apache License 2.0
1.23k stars 47 forks source link

Enable subpixel hinting for fonts in the documentation #209

Open nilslindemann opened 1 year ago

nilslindemann commented 1 year ago

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.