HTML markup, formating lost in Ankidroid

I’ve created a flash card which uses HTML markup to create an HTML table alongside the text within the card. When I view it in Anki desktop it’s perfect…

When I view the card with Ankidroid the formatting is lost. I had to use 2 screenshots as a page of space appears between the front and back of the card.

What am I missing that this is happening? Incidentally I’ve checked it in paid Anki on an iPad and it’s perfect.

What does the underlying HTML look like in AnkiDesktop (or AnkiDroid – because they should match)? Whatever is in there is being read differently by AnkiDroid. [Post it here in a code block/as pre-formatted text, in case someone needs to experiment with it.]

Here’s the HTML…

In the table below where would you add the scope attribue in the table's markup to tell screen readers exactly what cells the header is a header for — 
is it a header for the row it is in, or the column?<br><br>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Items sold summary</title>

 html {
 font-family: sans-serif;

 table {
 border-collapse: collapse;
 border: 2px solid rgb(200, 200, 200);
 letter-spacing: 1px;
 font-size: 0.8rem;

 th {
 border: 1px solid rgb(190, 190, 190);
 padding: 10px 20px;

 th {
 background-color: rgb(235, 235, 235);

 td {
 text-align: center;

 tr:nth-child(even) td {
 background-color: rgb(250, 250, 250);

 tr:nth-child(odd) td {
 background-color: rgb(245, 245, 245);

 caption {
 padding: 10px;

 <caption>Items Sold August 2016</caption>
 <td colspan="2" rowspan="2"></td>
 <th colspan="3">Clothes</th>
 <th colspan="2">Accessories</th>
 <th rowspan="3">Belgium</th>
 <th rowspan="2">The Netherlands</th>
 </table><br>Do this for the following rows or columns.<br>?: Clothes, Accessories<br>?:&nbsp;Trousers, Skirts, Dresses, Bracelets, Rings<br>?:&nbsp;Belgium, Netherlands<br>?:&nbsp;Antwerp, Gent, Brussels, Amsterdam, Utrecht

I think this might be a manifestation of this behavior - Bug report: Newlines duplicated within fields - #6 by dae . You have all that “invisible” header information in your field (as opposed to your template), so if you edit the note in AnkiDroid, it is re-parsing the newlines as linebreaks <br>.

Possible solutions for the time-being –

  • Don’t edit notes with complex HTML in AnkiDroid
  • Settings > Advanced > Workarounds > Replace newlines > toggle off

It looks like when you sync this back to AnkiDesktop, it will bring that mess of <br>s with it.

If you don’t have too many impacted notes, you can fix them by hand. Probably easiest to copy the HTML into a smart text editor (like Notepad++), replace the <br>s with \n newlines, and then paste the fixed HTML back into AnkiDesktop.

Much appreciated Danika. I’ve experiemented with both options and also now know how to view what a card is going to look like without having to to into edit mode with a card so this should no longer happen. I’ve also turned off ‘Replace newlines with HTML’ as well. So double insurance.


1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.