HTML markup, formating lost in Ankidroid

[FGFlan]

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.

[Danika_Dakika]

@FGFlan

When I view it in Anki desktop 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.]

[FGFlan]

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>
 

 <style>
 html {
 font-family: sans-serif;
    }

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

 td,
 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;
    }
 </style>



  <table>
 <caption>Items Sold August 2016</caption>
 <thead>
 <tr>
 <td colspan="2" rowspan="2"></td>
 <th colspan="3">Clothes</th>
 <th colspan="2">Accessories</th>
 </tr>
 <tr>
 <th>Trousers</th>
 <th>Skirts</th>
 <th>Dresses</th>
 <th>Bracelets</th>
 <th>Rings</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th rowspan="3">Belgium</th>
 <th>Antwerp</th>
 <td>56</td>
 <td>22</td>
 <td>43</td>
 <td>72</td>
 <td>23</td>
 </tr>
 <tr>
 <th>Gent</th>
 <td>46</td>
 <td>18</td>
 <td>50</td>
 <td>61</td>
 <td>15</td>
 </tr>
 <tr>
 <th>Brussels</th>
 <td>51</td>
 <td>27</td>
 <td>38</td>
 <td>69</td>
 <td>28</td>
 </tr>
 <tr>
 <th rowspan="2">The Netherlands</th>
 <th>Amsterdam</th>
 <td>89</td>
 <td>34</td>
 <td>69</td>
 <td>85</td>
 <td>38</td>
 </tr>
 <tr>
 <th>Utrecht</th>
 <td>80</td>
 <td>12</td>
 <td>43</td>
 <td>36</td>
 <td>19</td>
 </tr>
 </tbody>
 </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

[Danika_Dakika]

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

[Danika_Dakika]

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.

[FGFlan]

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.