Customize Ordered and Unordered List Width on PC

[lukejchanner]

Which Note Type (and version) is this about?

AnkingOverhaul (but present in other notes too)

Checklist

• I've verified that I use the latest version of the note type by redownloading it from AnkiWeb
• I've checked if anyone else suggested this feature before by looking through the issue reports.

What Anki version are you using?

Version ⁨24.11 (87ccd24e)⁩
Python 3.9.18 Qt 6.6.2 PyQt 6.6.1

What Operating system are you using? (i.e. MacOS, Windows, Linux)

Windows 11 Pro Version 23H2

Problem case

My Anki cards often use ordered and unordered lists. On PC, the default CSS limits list width to 50%, causing text to cut off in split-screen mode. I manually change the CSS to "max-width: 100%;" in the note editor, which fixes the issue, but these changes reset when notes update. See photos below

Solution

Add a setting in the add-on for each note type to customize the preferred max-width percentage for lists. This could be included in the Font tab or by renaming the Image Styling tab to "Styling" and placing the option there.

Alternatively, set a universal default max-width (e.g., 80% or 90%)

More information

Default behavior (50% max width for ul and ol)

Preferred behavior (90% max width for ul and ol)

CSS Styling: Here is the unedited code. I replace 50% in max-width with 90% or 100%.

/* ~~~~~~~~~ LISTS ~~~~~~~~~ */
ul {
padding-left: 40px;
max-width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

ul ul {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}

ol {
padding-left: 40px;
max-width: 50%;
margin-left: auto;
margin-right: auto;
text-align: left;
}

ol ol {
margin-left: 0;
margin-right: 0;
}

[AnKingMed]

@abdnh @RisingOrange we add a line for people in the front and back templates and they can add personal manual edits below that. Is it possible to do the same with the styling?

[RisingOrange]

@AnKingMed Yes, we can do that. I'll create a PR

Edit:
AnkiHubSoftware/ankihub_addon#1088
AnKing-VIP/anking_notes_addon#34

[RisingOrange]

@lukejchanner With the most recent versions of the AnkiHub and AnKing Note Types add-ons, you can add custom CSS to the bottom of the Styling tab of AnKing note types and it won't be overwritten.

To solve the problem with the lists, you can add this to the bottom of the Styling tab:

/*
ANKIHUB_END
Text below this comment will not be modified by AnkiHub or AnKing add-ons.
Do not edit or remove this comment if you want to protect the content below.
*/

ul {
  max-width: 90%;
}

ul ul {
  max-width: 90%;
}

ol {
  max-width: 90%;
}

If the ANKIHUB_END comment is already there, you don't need to duplicate it.

[AnKingMed]

@RisingOrange can we close this now?