search

mne-tools / mne-python

MNE: Magnetoencephalography (MEG) and Electroencephalography (EEG) in Python
https://mne.tools
BSD 3-Clause "New" or "Revised" License
2.66k stars 1.31k forks source link

HTML repr tables have really bad text contrast ratios #12775

Open drammock opened 1 month ago

drammock commented 1 month ago

as seen in the Eyetracking tutorial:

Screenshot 2024-08-05 at 9 06 49 AM

Originally posted by @scott-huberty in https://github.com/mne-tools/mne-python/issues/12750#issuecomment-2269424078

drammock commented 1 month ago

This is actually quite a hard problem. Our website theme has good support for tables (and dataframes) already, but we're using a bunch of custom CSS instead so that the results look OK in the vscode integrated terminal (and possibly also in standard Jupyter notebooks too?). Some problems that I noticed:

  1. The toggle-to-open carets don't match similar carets in the website theme (e.g. in the left sidebar of the tutorials page) --- they're filled-in triangles, theme's carets are open chevrons.
  2. the toggle-to-open carets are hard-coded with white or black fill depending on an @media "prefers-dark", which means currently they're unresponsive to changing the website theme's light/dark mode toggle
  3. Even if we solved point 2, The toggle-to-open carets are set as background images which makes it hard (though not impossible?) to target them with CSS
  4. the fade-out effect when collapsing feels clunky (at least to me); seems like a height animation would be cleaner (and more consistent with the web theme, which uses a similar animation for site-wide warning banners)

My opinion is that we should remove as much of the CSS in mne/html_templates/static/repr.css as possible, add what we need to optimize it for the online docs, write a test to make sure it stays the same on a sphinx-rendered site, and then start adding additional rules to make it look nice in notebooks / vscode.

drammock commented 1 month ago

one idea that might work is to craft the CSS rules so that there are two co-extensive sets of rules: one set in repr.css and one in the main website style file doc/_static/style.css. If we can engineer it so that the selectors in style.css are always greater specificity than the ones in repr.css, then the style.css rules will always apply on the website, and the repr.css rules will apply in other contexts (notebooks, vscode, etc). We might be able to do that by wrapping all the repr.css rules in an @layer

larsoner commented 1 month ago

It would be great to remove as much custom code as possible so it might be worth starting with that as a first step, then trying the layer / precedence to fix stuff that needs to be overridden.

hoechenberger commented 1 month ago

It's indeed difficult to get this right! I'm happy to help here, but i'll be quite busy for the next 2 weeks or so! But i'm highly interested in getting this right / making this better