How to fix HTML not being displayed properly on Anki Desktop?

Anki Desktop
1

On Anki Desktop on a Mac, a card with the following HTML:

<ul class="defs">
  <li style="list-style-type:none"><span class="iteration">1</span><span class="definition">Definition.</span>
    <ol class="subSenses">
      <li class="subSense" style="list-style-type:none"><span class="subsenseIteration">1.1</span><span class="subDefinition">Subdefinition.</span>
      </li>
    </ol>
  </li>
</ul>

with the following Styling:

.card {
  font-family: arial;
  font-size: 20px;
  text-align: left;
  color: black;
  background-color: white;
}

.iteration {
  display: inline-block;
  position: relative;
  right: 1em;
  width: 0px;
}

.subsenseIteration {
  display: inline-block;
  position: relative;
  right: 2em;
  width: 0px;
}

Is being displayed like this:

image

The issue is that the 1.1 is being displayed vertically. On anki web and anki mobile, I am not having this issue. It is being displayed properly and looks like this:

image

I tried this with the latest version of anki and also with a previous version. All my add-ons are disabled as well.

Does anyone know why this is happening or how to fix this?

2

Try changing the display for subsenseiteration from inline-block to inline?

3

Hi shallash, thank you for trying to help. I am using inline-block is because it allows me to set a width for the element. As you can see in the styling, I set the width to 0 so that the iteration number doesn’t take up any space in its original location. This way I can have it show up in the margin without leaving a gap where it used to be. If I were to use inline instead, it wouldn’t allow me to change the width, and thus there would be a gap.

1 Like
4

I’m a newb so i don’t actually get what you are trying to attempt here tbh :sweat_smile:

But when I removed the width:0px property from .subsenseiteration it seems to look pretty much like the screenshot from your mobile device?

image
image629×605 20.6 KB

EDIT: and yeah the same html+css in jsfiddle seems to work properly, so it’s possible this is due to anki PC’s default stylesheet overriding something.

5

It only looks the same because there is only 1 line haha. You’ll notice the gap when there are at least two lines of text for each definition. Then you’ll see that the first line is shifted to the right a bit because of the original location of the iteration number.

1 Like
6

Right that could be related. And no worries, I’m also a beginner

1 Like
7

Here’s what the gap looks like (this happens when you use inline/don’t set width=0px).

image
image691×92 11.7 KB

As you can see, The sentence is indented to the right.