search

lodash / lodash.com

The Lodash website.
https://lodash.com/
Other
138 stars 84 forks source link

Code examples unreadable (dark background color) #241

Open weedySeaDragon opened 3 years ago

weedySeaDragon commented 3 years ago

The background color for code examples on lodash.com is black which makes the examples totally unreadable. See the 2 screenshots below.

The style that seems to be causing the problem:

.highlight {
    background-color: #283646;
    color: #ddd;
    margin: 0 -999rem;
    padding: 3.2rem 999rem;
    position: relative;
}

I haven't delved into assets/css/_variables.scss or any other .scss files, so the actual root of the problem could certainly be something that indirectly leads to defining that style with those values.

I verified this with both Chrome (Version 91.0.4472.77 (Official Build) (x86_64)) and Firefox (87.0 (64-bit)).

home page:

lodash-lodashComHome-blackBackgroundColor

Array chunk:

lodash-lodashComDocs-examples-blackBackgroundColor

--

yukithm commented 2 years ago

It's probably Source Code Pro font problem.

I removed the old font and installed the new one, and the problem went away.

brew uninstall font-source-code-pro
brew install font-source-code-pro
trent-boyd commented 2 years ago

I also had the same issue and @yukithm's advice worked for me. I confirmed that Chrome was rendering the text in a bugged version of Source Code Pro. Reinstalling the font from brew worked like a charm.

I think this can be closed.

weedySeaDragon commented 2 years ago

I don't think it's the responsibility of the web user to change things so that a website is readable. Given that there is a known problem with this font, a different font should be used (or a different color scheme/style so that the problem doesn't happen. Whenever Adobe fixes it (which includes making the updates easily available), then this font can be used again.

Since this hasn't been fixed, this shouldn't be closed.

(FYI @trent-boyd : I don't have a brew cask for the font; I didn't use brew to install it. So @yukithm's approach doesn't apply for me.)

trent-boyd commented 2 years ago

(FYI trent-boyd : I don't have a brew cask for the font; I didn't use brew to install it. So yukithm's approach doesn't apply for me.)

The updated version is also on NPM, but this issue was fixed 9 months ago. I'm sure you can find the update for the font in the same way you installed it. You could also just uninstall the font entirely (and be served the webfont instead) or install Consolas since it's higher in the stack.

dsandmark commented 2 years ago

The Source Code Pro font was the issue for me, hadn't installed it through brew though.

On macOS, I opened the application All Fonts -> Searched for Source Code Pro -> Right-clicked it and disabled it. Restarted Chrome and the lodash documentation looks good again.