In previous anki versions (around 2.1.48) the editor offered a horizontal scrollbar in case the content, most often code wrapped in <pre>, was wider than the editor window. I pressed shift+mouse wheel to scroll through wide content.
Now in 2.1.52 the horizontal scrollbar in the editor is gone and it’s much harder to see wide code pasted into editor fields.
In review mode everything is fine, the text (code) wraps normally.
I haven’t tested it, but it usually works as a workaround in these situations: if you select some text that does not wrap, and put your mouse outside of the visible input region, in the direction you want to scroll, it will scroll. Better than nothing waiting for a patch I guess.
You can use CSS Injector. Adding the following to editor.css works for me:
.editing-area {
overflow: auto !important;
}
Tried this but did not see any scroll, unfortunately. Tried with overflow: scroll but did not see any scrollbar either.
Oh sorry, I had some other fixes in that file that were helping. How about this?
.fields {display: inline-block !important; padding: 0 !important; margin-inline: -1px !important;}
.fields > div {display: inline-block !important; padding: 4px 2px 0px 2px !important}
.fields > div {width: 100% !important}
.editing-area {overflow: auto !important;}
Thanks, that did have some effect, though vertical scroll does not work on long entries. I will try to tweak the styles to match my needs.
Fwiw here’s my entire css (this is Anki 2.1.52). Also you can use the AnkiWebView inspector addon.
body {
--custom-border-color: #a0a0a0;
--custom-focus-color: #ef9700;
--custom-label-font-color: #000 /*#727272*/;
--custom-label-font-size: var(--base-font-size);
}
body .night_mode {
--custom-border-color: #222222;
--custom-focus-color: #5e8eac;
--custom-label-font-color: #a0a0a0;
}
/**************************************************************************************/
/* align buttons horisontally to be in line with fields,
add spacing to the right and below of each group */
.button-group {padding: 0 4px 4px 0 !important; margin: 0 !important;}
/* pretend that the above padding doesn't exist when we are not scrolling */
.fields > * {position: relative; top: -4px;}
/* horizontal padding of 1 pixel is needed to draw the field focus indicator,
which is is 2 pixels wide, overlapping the 1 pixel thick border;
setting grid-gap to 0 removes excessive vertical space between fields */
.fields {padding: 1px 0 !important; grid-gap: 0 !important;}
/* why so many things have margins and paddings? */
.container {padding: 0 !important;}
/* remove the overflow indicators (black lines on top and bottom of fields);
while they kind of help, they are way too ugly */
.sticky-container {border: none !important}
/**************************************************************************************/
/* do not draw border around the element containing the input field and its label */
.editor-field {border: none !important;}
.editor-field {box-shadow: none !important;}
/* instead, draw border and focus indicator for the input field only */
.editing-area {
border: 1px solid var(--custom-border-color) !important;
border-radius: 5px !important;
}
.editing-area:focus-within {
border-color: var(--custom-focus-color) !important;
box-shadow: 0 0 0 1px var(--custom-focus-color) !important;
}
/* remove the dotted line, tweak label color, text size and the size of the small icons;
do not show the icons if the mouse isn't over the field */
.label-container {border: none !important; font-size: var(--custom-label-font-size);}
.label-container .label-name {color: var(--custom-label-font-color) !important}
.label-container .field-state {height: 1em !important; opacity: 0%}
.label-container span {--icon-align: middle !important}
.editor-field:hover .field-state {opacity: 100%}
/**************************************************************************************/
/* tweak the tag area to remove unnecessary empty space,
replace the icon with the word “Tags” */
.tag-editor-area {margin: 0 !important; padding: 2px 0 0 1px !important;}
.tag-options-button {padding: 0 !important}
.tag-options-button div {display: none;}
.tag-options-button::after {
content: "Tags";
font-size: var(--custom-label-font-size);
color: var(--custom-label-font-color);
padding-right: 2px;
}
/* slightly raise the text in the tag button so it appears centered */
.tag-relative button > span:nth-child(1) {line-height: 1; padding: 0.2em 0 0.3em 0;}
/**************************************************************************************/
.fields {display: inline-block !important; padding: 0 !important; margin-inline: -1px !important;}
.fields > div {display: inline-block !important; padding: 0px 2px !important}
[notetype="tango"] .fields > div:nth-child(1) {width: 40%}
[notetype="tango"] .fields > div:nth-child(2) {width: 20%}
[notetype="tango"] .fields > div:nth-child(3) {width: 40%}
[notetype="tango"] .fields > div:nth-child(4) {width: 100%}
[notetype="tango"] .fields > div:nth-child(5) {width: calc(100% - 2em)}
[notetype="tango"] .fields > div:nth-child(6) {width: 2em}
[notetype="tango"] .fields > div:nth-child(6) .label-container {display: none;}
[notetype="kanji"] .fields > div:nth-child(1) {width: 75px; float: left;}
[notetype="kanji"] .fields > div:nth-child(2) {width: calc(40% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(3) {width: 60%; float: left;}
[notetype="kanji"] .fields > div:nth-child(4) {width: 70%; float: left;}
[notetype="kanji"] .fields > div:nth-child(5) {width: calc(30% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(6) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(7) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(8) {width: 100%}
[notetype="kanji"] .fields > div:nth-child(9) {width: calc(100% - 75px); float: left;}
[notetype="kanji"] .fields > div:nth-child(10) {width: 75px; float: right;}
[notetype="kanji"] .fields > div:nth-child(11) {width: 75px; float: right;}
.editing-area {overflow: auto !important}
One alternative you may wish to consider is
pre { white-space: pre-wrap; }
So as I understand my problem is that in preview mode everything is fine and the pre tags wrap correctly. But in editor mode I’d like to have
anki-editable pre {
white-space: pre-wrap;
}
It seems it’s not possible because of the shadow DOM, which does not allow me to control how the pre tag from the pasted code wraps in the editor.
I’m fine with the wrapping of the code itself (pre tag) but the text before the code also gets hidden which is annoying. I have white-space: pre-wrap in the card’s styling but this helps only in the preview mode.
If you’re saying “I can’t use css to style the fields”, the add-on mentioned above will let you do that. If you’re saying “the non-pre text doesn’t wrap”, it likely either has its own custom styling applied to prevent that, or the words are separated with non-breaking spaces, which you can reveal in the HTML editor.
