[Docs]: Dank Mono is hard to read as someone visually and cognitively impaired

[ScottAwesome]

What problem is this solving

Would like to make code examples more accessible for others with visual and cognitive impairments

Proposed solution

Is it possible to use a different font from dank mono or increase the contrast of the theme? JetBrains Mono has good ligature support, as does Fira Code

Describe alternatives you've considered

I tried to just modifiy this in my browser, and this actually proved to be quite complicated.

I would have to

• Install a 3rd party extension
• Target the code examples with CSS
• Then switch its font

I did try toggling some accessibility settings in Chrome, and this did not help. I have to increase my font size instead for it to be more readable

I'm sorry if I'm being a nuisance here 😢 I really like the docs and pinia, you guys are doing great work. I'm just having the hardest time reading the docs with this font, even in dark mode

[posva]

The docs theme will change in the future and include a different font. The cursive seems to be more difficult to read for non European. So this is already planned for the near future.
I need to ask though: what makes dank mono hard to read while other fonts like fire font do not?

[ScottAwesome]

The docs theme will change in the future and include a different font. The cursive seems to be more difficult to read for
non European. So this is already planned for the near future.
I need to ask though: what makes dank mono hard to read while other fonts like fire font do not?

@posva I can only speak for me here, with that said:

Its the cursive that is the biggest issue I've had, even though ligatures can add emphasis, Fira Code and JetBrains Mono don't have heavily pronounced cursive type, in my experience. Cursive in most fonts like this also tend to have letters tightly spaced together, which can compound the problem

[r-priyam]

To be honest it's all good for me 🙈.. But I agree, cursive seems a bit off the track.

[NarendraPatwardhan]

@ScottAwesome, I am not visually or cognitively impaired and don't have a problem with cursive in general. However, this particular font makes it extremely difficult to process what's written in the context of code.

[vlazar]

Not asking for any particular font/style, just a feedback for clarity. I have astigmatism and it seems light font is what makes it most difficult to read for me. Not as bad as lights in the night, but still harder to focus on.

Code examples are font-weight: 400 which I imagine must look very pleasant to read for someone with good vision though. Tried to change it to font-weight: 600 and it makes cursive easier to read for me ( I know people with good vision find such bold fonts mostly terrible). Still letters like s and f are harder to parse.

[posva]

Added to #829

[rtek]

Thanks for this - its jarring to read code that switches between normal looking glyphs and cursive.

In the mean time id recommend using chrome source overrides for pinia.vuejs.org/dank-mono.css with an empty file.

[azu]

I met same issue and I could not read the document.
Temporary workaround, I written Greasemonkey/Violentmonkey script to avoid this issue:
https://gist.github.com/azu/e37664f183ef1dd737397992d83d320b

[snowsunny]

I think the problem is happening to non-native English speakers too, like me... 😔 🇯🇵

How I fixed it: https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

:root {
	--code-font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

[leegee]

Very disappointed to see this ticket "closed as completed".

The comment in the code is barely visible because of the lack of contrast, and the barely legible because of the nature of the cursive.

I really want to use, and convince my teams to use, Pinia, but the lack of docs makes it hard, and the style of the docs means they cannot be used by anyone with a visual impairment (such as myself).

[JasonGrass]

there is a temporary method: Workaround for https://github.com/vuejs/pinia/issues/873

you can use it in tampermonkey

// ==UserScript==
// @name        pinia: clean document
// @namespace   https://pinia.vuejs.org/
// @match       https://pinia.vuejs.org/*
// @grant       none
// @version     1.0
// @author      -
// @description Remove unreadable web fonts style
// @run-at      document-end
// ==/UserScript==
document.documentElement.setAttribute("style", `--code-font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace`);