Anki Forums

Add Table [Official thread]

If you have a problem with the add-on Add Table post in this thread. This way I get notified. If you make a new thread I will likely miss it.

Hi ijgnd,

I have a query, i have noticed that the text in my table is small and i need the text to be little bit bigger when reviewing flashcards. I am using Anki to learn Sanskrit.

With my rudimentary coding skills, i have come to understand (i may be horribly wrong )that you are controlling this from python.

Could you please guide me how to go about this need?

Requirement:
I want to increase the font size of my text in the table body.

Preview 2020-11-08 08.55.09

Anki for Desktop is indeed written in the programming language python. As an end user that’s not relevant for you.

In Anki you create NOTES. According to rules you set in the card templates window Anki automatically generates CARDS from your notes. You review these CARDS. These cards only hold scheduling information and no content.

The fields in a note are in html. From the contents of your fields and the Card Templates Anki basically makes small webpages which it shows in a built-in customized version of the chrome browser.

In general you can adjust the appearance of html with css. So for styling cards you need to know basics about html and css. Unless you want super sophisticated stuff you can achieve a lot by learning a few basics (e.g. from youtube tutorials).

 

Usually you only see the rendered text in Anki. You can see the actual source code of a field by pressing Ctrl+Shift+X when the cursor is in the field (or click the “Edit html” which you’ll see if you click the hamburger menu in the upper right of the editor).

When you review cards anki puts the contents of the fields into the Templates you set in the “Card Templates” window and applies css rules to style them.

To find out what to style look at the html source code of your field. If you have a field with a table you’ll see stuff like <table>, <tr>, <td> (which are called tags).

Then in the “Card Templates” window you need to add something to the styling section that applies to these tags.

I have only basic knowledge about css.

I would try something like

table {
  font-size: 30px !important;
}

This sets the font size in all tables to 30px. The !importantpart means that all other font settings on the card will be overridden. This might be a problem if you have super complicated styling.

 

To learn more about styling cards in anki there are many youtube videos, e.g. Anki: Customizing Card Style (font, color, hints, etc)

 

Note: What you set in the styling section of the Card Templates window does not apply to the add window or the bottom of the browser window (because these show you NOTES).

Thank you for such a quick reply.

I spent few hours after posting query to you and tried to understand the flow of the program.

I have modified config.json and meta.json;I was able to get the required output, i am glad that I was able to get it done, I am learning programming for my professional development but don’t consider myself as a good programmer yet.
In config.json, I renamed the section CSS1 to “Sanskrit” and rest of the code for the section from other sections you have written in the file.
"Sanskrit": { "BODY_STYLING": " style='{0} padding:2px; font-size:20px; border: 1px solid;' ", "HEAD_STYLING": " style='{0} padding:2px; font-size:20px; border: 1px solid;' ", "TABLE_STYLING": " class='table_class_basic_minimal_width' style='font-size: 85%; width: 50%; border-collapse: collapse; border: 1px solid;' " },

in meta.json replaced css1 code with below code adding font-size, and copied rest of the stuff from other section you wrote in this file

{"Sanskrit": {"BODY_STYLING": " style='{0} padding:2px; font-size:20px; border: 1px solid;' ", "HEAD_STYLING": " style='{0} padding:2px; font-size:20px; border: 1px solid;' ", "TABLE_STYLING": " class='table_class_basic_minimal_width' style='font-size: 85%; border-collapse: collapse; border: 1px solid;' "},

Making these two changes, i was able to get the behavior i wanted on demand, by choosing Sanskrit from the drop down.

Preview 2020-11-08 08.55.09

Appreciate your addon so much.

I’m glad you found a solution. I didn’t mention the add-on config in case you also had to deal with existing tables.

You can customize Anki with add-ons. Even though there are already hundreds of add-ons there are still many ideas to implement.

If you know some python and are interested in this topic here’s a collection of add-on development related links: https://www.reddit.com/r/Anki/comments/bae3yx/building_addons_without_reading_all_the_source/ekazvjd?utm_source=share&utm_medium=web2x&context=3

If you are looking for some ideas for add-ons here are some links: https://www.reddit.com/r/Anki/comments/jnm1py/taking_an_intern_in_ankidroid_or_anki_addons/gb5do4d?utm_source=share&utm_medium=web2x&context=3

Hello ijgnd,

I am trying to have some information hidden in a created table by having a cell font color match the background color, and become visible on mouseover. For that I have a style defined:
.hidden {
color: white;
}
.hidden:hover {
color: black;
}
and I have to manually add this to every single cell of the table where I want this ‘hidden’ behaviour:
<tr><td style=" padding:2px; border: 1px solid;"><span class="hidden">data2</span></td></tr>

I am writing in hope there is a better / less time-consuming way to accomplish this that you might know.
Any ideas, please?

@sbmisco: I have never used this kind of formatting so my knowledge in this area is limited.

Maybe this works? My add-on Custom Styles can be used to apply a class like “hidden”. This add-on doesn’t support stuff like .hidden:hover, see the issue support for pseudo elements or pseudo classes #17.

So you’d still have to set the styling in the card templates window for each note type and for the editor maybe try “Editor Custom Stylesheet”.

Hello !
This add-on requires anki <= 2.1.23
Is an update planned to make it compatible with most recent anki updates?
Thanks !

@payfool : it should be this:

check for add-on updates from the add-on dialog in anki.

background:

  • on ankiweb there can be multiple versions of the same add-on for different anki versions.
  • when you update anki the add-ons are not automatically updated.
  • so in the first 24 hours after having updated Anki you might be in your situation. Anki checks for add-on updates once a day so after a day you should be offered the latest version. But you can also manually check.

if this doesn’t help: Delete the add-on and reinstall it. If you have some custom config make sure to copy/backup it before you delete the add-on.

1 Like

it works, thanks !

I always use this add-on to make a table. Thanks for your work. But it seems to have a bug. When I change the Config such as "table_style__column_width_fixed_default": true,(change the true into false).But there is a width: **%; in the result HTML. Could you fix it?

ps:I’m in the Anki V2.1.44

@zyd199012: thanks for notifying me. But I can’t reproduce this problem at the moment.

Could you test again with the latest Anki version (2.1.44) and just the add table add-on. If the problem persists: Share you whole config of my add-on and show which boxes you had checked in the dialog before inserting a new table (screenshot). This should allow me to reproduce the problem which makes it much easier to fix it.