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.

Hello, is it possible to avoid using header rows? If not, would it be possible to add this option? I know that you can somewhat hide it with CSS, but I’d rather do it natively
Thank you very much!

@aPaci: There’s an option “First row is head” that you can uncheck in the dialog that opens when you click the table button in the anki editor.?

Yes, that works perfectly; i was trying to do the same thing with the automatic table creation. For example:
test | test
test | test
always makes the first row as head
Is there any way?

Hi @ijgnd , just a quick heads up: The Add Table-Addon gets deactivated automatically under Anki 2.1.45, even though it seems to be fully compatible with it. I’m currently testing the RC1 of this new version:

Same goes for Add Hyperlink, also a basic addon that is probably used by many people.

If I remove or adjust the "max_point_version": -44 setting in meta.json both addons work just fine. I played around with both and had no issue at all.

It is probably a good idea to adjust this setting before the new version of Anki gets released, otherwise many people will be left wondering what happened to these buttons they so often use. :+1:

@basiskarten: Thanks for the info.

tldr: update your add-ons and restart

long version: I have uploaded slightly changed versions for the table and hyperlink add-on recently. In case I introduced bugs I didn’t want to have the update delivered to everyone right away. So I uploaded these new versions just for 2.1.45+. When you update anki it does not directly check for add-on updates on the first start (at least until .44). That’s a known limitation (see here) and I guess that you’ve run into it. I still didn’t have time to look into this.

To test if this explanation applies here: Could you manually rewrite the meta.json to “-44”, restart Anki, and then check for add-on updates?

btw: the biggest change was in the table add-on how it transforms text that’s separated by | (for details see here). If you run into a problem with this in the new version for 2.1.45 let me know.

1 Like

Got it, thanks. Yes, if I look for updates indeed it tells me that some are available and if I do update I get the new versions and everything’s fine.

To be sure: The only reason for restricting it to .45 was to test it on a limited number of people, not some known incompatibility to previous versions, right?

The reason I’m asking is that I deliver both the “Add Link”- and a slightly modified version of the “Add Table”-Addon via my Butler-addon. It was good to me that both are very stable since otherwise my modified version would get overwritten a lot. (The only change in the modified version is that all tables would get an additional class called “user_tabelle” which is used in all of my note types.) Maybe it’s best to break the automatic updates for the add_tables-addon so this doesn’t happen. Anyway, are there any other changes planned in the future?

  • indeed, the only reason for restricting it to .45 was to test both of them on a limited number of people.
  • I don’t really plan major updates for either add-on. For the table add-on maybe at some point to use a markdown library to transform the text to a html table. But I haven’t made the change in the last year so there’s a good chance I’ll never make it - especially since hgiesel (who has rewritten the editor) recently mentioned “Table editing will probably be implemented at some point”, see here.
2 Likes

Hi, So I am new to this anki applications but since I am a developer having knowledge of html,css,JS and Python I can edit it but I need a starting point. So I want to change this Add table plugin to accomodate for match the following quiz type which returns answers you matched correctly as shown

I know that I can edit the card type and add html input field for that. But I am not sure how to do the javascript part of it as I have not worked on Anki javascript till now.