CSS Injector [Official Support]


Thanks for reply. I really do not know if I am doing something wrong or what.

Thanks, that was helpful!

The error comes from this line in injector.js:

while (!NoteEditor.instances[0]?.fields?.length) {

@Maeshara @Avalanche Which OS are you running Anki on? I guess your system doesn’t support the ?. syntax (Optional chaining operator) yet.

I’ve pushed an update that translates the source code into an older JavaScript version (es2018 instead of esnext), so the compiled code won’t contain that problematic syntax.


Little rant: I’ve had this issue a couple of times already and I wonder when we can finally use this basic syntax without having to worry about cross-platform compatibility. As seen here, all major browsers already support it:

1 Like

It works again ! Thanks

But I need a little help again, I want to apply “text-align: center” to my fields, which tag do I have to use ? It seems that the tag “mid: number” doesn’t work anymore :confused:

Can you show me the CSS that’s not working? As far as I can see, the [mid] attribute is still applied to both <html> and <anki-editable>.

Optional chaining was added in Chromium 80; the macOS Qt5 build uses 5.14 which is Chromium 77. Qt 5.15 introduces some regression, so .14 is better on macOS.

1 Like

Ok so now it works again I don’t know why :joy:, really thanks you for your disponibility

It is PC on windows 10 here, updated of course.

Yesterday’s update of the CSS injector made it works again. The extension is on. The Console Tab in the Inspector is empty. No errors.

But something is different now. My field.css is short but extremely important for me. On your advice I put there:

anki-editable {
padding: 0px 6px;
line-height: normal;
}

But now, line-height normal/1.2rem sqeezes lines too much. It needs to be 2rem to look as I like (and to be readable). Furthermore, the padding command is crossed out and does nothing.

Every time I install Anki I just select the previous folder. Maybe it’s time for clean installation :slight_smile: Or 2.1.45 is so old…
3

One hour later…
I installed Anki 2.1.52 Qt6. Clean installation. Win10.

  • padding still does not work
  • line-height works and it does not sqeeze lines if set at “normal”

After the last update, the CSS is inserted above the default editable.css, so it’s overwritten. When I tested this, it showed on top in the dev tools, so I thought <link> styles get priority over <style> tags. Guess not. I will fix this tonight.

Until then, just use !important like this:

anki-editable {
  padding: 0px 6px !important;
}
1 Like

The main download page just says “allows you to…” but since there are no instructions or no example of how to do something this add-on is not likely to be used by anyone without any CSS knowledge. That’s too bad because it can do some nice things that a lot of users might like. May I suggest your main page contain a simple example like:
anki-editable {
background-color: rgb(220, 245, 250);
line-height: 1.1rem;
}
with instructions to put it in the field.css file
and maybe a screen shot of the result?

1 Like

Thanks for the suggestion. That’s on my todo list, but I haven’t found the time for it yet. Currently, my highest priority is to ensure functionality for existing users.

@kleinerpirat I am unashamedly trying to steal some of your setup from CSS Injector (and some of @hkr’s code) to use with my unpublished “Markdown input” - however as a n00b when it comes to TS (and Rollup) I am having some difficulty setting up tsconfig.json to get rid of all warnings. It may be worth noting that I am using Rollup rather than tsc to bundle my code (as the bundle includes CodeMirror and a modified Showdown). I can’t get the following import statements to resolve:

import * as NoteEditor from "anki/NoteEditor";
import type { PlainTextInputAPI } from "@anki/editor/plain-text-input";
import type { RichTextInputAPI } from "@anki/editor/rich-text-input"

The NoteEditor I can’t get to resolve in the VSCode nor when transpiling.

The Plain- and RichTextInputAPI’s I can get to resolve in the IDE but transpiling fails in the export type { PlainTextInputAPI } from "./PlainTextInput.svelte"; with plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './PlainTextInput.svelte' or its corresponding type declarations. (same for RichTextInputAPI) - I am guessing the transpiler doesn’t resolve the relative path correctly?

Cloning your anki-css-injector repo and running tsc in the ts directory gives similar errors:

src/iterator.ts:1:29 - error TS2792: Cannot find module 'anki/NoteEditor'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

1 import * as NoteEditor from "anki/NoteEditor";
4 import type { RichTextInputAPI } from "@anki/editor/rich-text-input";
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 4 errors in the same file, starting at: src/iterator.ts:1

Is the tsconfig.json on GitHub up to date? How have you set up your environment? Do you have any ideas on where/what I should look for?

Thanks

Since my setup is based on GitHub - hgiesel/anki_new_format_pack, perhaps this info from that add-on’s description is useful:

Only a few explicit types can be imported at the moment. For example, this line imports an object at runtime, and is not typed, and will show an error in the editor (but will build):

import * as NoteEditor from "anki/NoteEditor";

So, I don’t have any magic trick to deal with this - I just ignore the error in VS Code ^^

How can I additional space between some fields of certain note types in Anki 2.1.54?

This feature is sometimes useful to make a note type that has many fields more clear. In the past e.g. the user “basiskarten” (Thomas Kahn) had such a feature for some of the note types he uses in his commercial decks. He relied on adding line breaks into field names which worked well until around version 2.1.40.

I guess that I have to start in editor.css with [mid="1234567890123"] but after this I have no idea e.g. how to match the 3rd, 6th, and nth field.

In Anki 2.1.49 I currently use [mid="1234567890123"] #fields > div:nth-child(...) {margin-top: ...}.

I’d appreciate any advice.

Try the following:

:root[mid="9999999999999"] .fields > div:nth-child(3) .editor-field,
:root[mid="9999999999999"] .fields > div:nth-child(6) .editor-field {
    margin-top: 2em;
}

4 Likes

@hkr: Thank you very much! As always your solution works great.

1 Like

How do I change the size of the tags in the Tags field? I imagine that’s in the field.css file, right? What are the attributes that I use?

It’s actually editor.css :slight_smile:

Try the class .tag for the wrapper of a single tag. It also has some children. I advise to use AnkiWebView Inspector to find your selectors.

The add-on does not seem to work in 2.1.55 or newer. I’d be grateful if you could update it when you have some time. Your add-on is very useful because it allows me to make long notetypes manageable by adding some additonal spacing between some fields

Or do I just need different css rules? If so I’d appreciate a hint.

In 2.1.54 I use

:root[mid="9999999999999"] .fields > div:nth-child(6) .editor-field {margin-top: ...}

 

P.S. Your work on the 2.1.55 GUI looks great.

1 Like

Just bumping this topic. I’ve forgot multiple times about planned add-on updates. Maybe (I read that were you busy the last few weeks) it’s the same with you. Sorry for bothering you.

Can this addon (or any other?) change tag text to smaller font size in browser, as well as display full parent deck for subdecks (not the shortened ...::subdeck)?

So instead of ...::short show the full example::short as seen on hover here:

  • tags

I tried using the AnkiWebView Inspector but couldn’t figure out how to accomplish this.