Make deck options window's typesetting more compact

Deck options window seems not to use screen space efficiently:

  • When I open it on MacBook 13 with the default screen settings, it requires scrolling 4 screens to reach the bottom
  • In the full screen mode, the windows is typeset in two columns but still requires scrolling
  • The spacing between the columns seems too wide

I suggest reducing:

  • vertical spacing between the sections
  • the font size of the header
  • the spacing between columns

For example, in ‘The elements of typographic style’, Bringhurst proposes the following typesetting for headers, given the text is 11 and baseline is 13:

11/13 small caps, 13pt above, 13pt below
11/13 bold u&lc, 8pt above, 5pt below
11/13 caps, 26pt above, 13pt below
14/13 italic u&lc, 16pt above, 10pt below

I believe this will result enough vertical space reduction to fit the options into 3 screens in pop-up mode and 1 screen in full-screen mode.

I suggest you mock these changes up yourself - either by modifying Anki’s source, or by tweaking the styling using the web inspector. If you then post before and after screenshots, the rest of the community can offer their thoughts.

https://addon-docs.ankiweb.net/debugging.html#webviews

1 Like

Do I understand it right that deck-options.css is generated from anki/deck-options-base.scss at main · ankitects/anki · GitHub, which mostly uses the Bootstrap defaults? So, for demo purposes, I can simply override these defaults for h1, .col, etc. in that file and compile Anki?

There may be some styling embedded in the Svelte files as well. I’d recommend you have a play with it, or use the web inspector if you just want to make some minor tweaks to the rendered display.