Anki Forums

Formatting Bulleted Lists

This still isn’t working the bullet points are way off to the left. Attached are the images after inputting the data provided in a previous potential solution. I would even cope with having the cloze deletions parts on the left as long as they are straight after the bullet points with the correct indentation

Still Not right #4

How do you want the card to look? Do you want to keep the text more-or-less centered, but with bullet points to the left? If you’re okay with the text in the list being left-justified, you could try adding this CSS:

li {
    text-align: left;
}

If that doesn’t solve your problem, can you show us the HTML you’re using for that example card?

I want the answers to the cards to look like this with the correct indentation.
It can be orientated to the left or in the middle as long as the bulleted list and indentation are correct
Anki Example 1

Are you pasting from a Microsoft product like Word? If so, you might have more luck opening the files in LibreOffice and pasting from there instead.

1 Like

No, I just want the format to look like this

Have you tried adding that bit of code I posted into the Styling section? What were the results?

Yes this is perfect, is there any way to align it to the middle but to keep how it is formatted with the words coming straight after the bullet point. If not doesn’t matter because this will do.

This is kind of a hacky solution but I think it will work. Add the following CSS to the Styling section:

.container {
  max-width: 40vw;
  margin: 0 auto;
}

This will center the area corresponding to the Back Extra field. The text within will still be left-aligned, but the field itself will be closer to the center of the window. The 40 means that the field is limited to taking up 40% of the width of the window; you may want to increase that number if the text area is too narrow.

This is the exact reason why I suggested using an inline-block container for your content.

You want it to look like this, right?

The only change you’d have to make from my original answer

is this:

<div class="container">
    <div>{{cloze:Text}}</div>
</div>

I just didn’t think you’d need the aligned lists on the front as well, so I only used the container on the back.
HTML/CSS is very easy to learn, I can only recommend you get used to it, so you can get creative with your cards :wink:

2 Likes

Unfortunately this hasn’t worked. I’ve clicked save. As you can see it is still to the left.


This doesn’t work for me, I’ve tried inputting the css instead of and in addition to the original container code you gave


You inserted the HTML for the front side into the Styling section (CSS).

That part needs to be in the Front Template :slight_smile:
You just need to replace what’s currently in the Front Template with this (& delete it from the Styling section).

Hey man, you can add this in the “styling” section of your card :

ul { display: inline-block; text-align: left; }
ol { display: inline-block; text-align: left; }

ol is for 1. 2. 3… and ul is for the bullet
Tell me if its works

2 Likes

EDIT:

This is a much cleaner solution and works just as well. @GhostFlipper829 Sorry for any confusion I caused with my setup.

My originally suggested setup (from the other topic) works too, but it’s unnecessarily complex.

Container-setup

The style inline-block has to be applied to the parent element of the lists (<div class="container">), which is centered because of .card {...text-align:center;...}.

There’s no need to style the lists, they inherit text-align:left from the container class anyway.


Been doing it like this for a while and never noticed any issues.

Front

Click to expand
<div class="container">
    <div>{{cloze:Text}}</div>
</div>

Back

Click to expand
<div class="container">
    <div>{{cloze:Text}}</div>
    <br>
    <div>{{Back Extra}}</div>
</div>

Styling

Click to expand
.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}

.nightMode .cloze {
 color: lightblue;
}

.container {
  display: inline-block;
  text-align: left;
}
1 Like

Cool? My setup its just like 2 lines, very simple and its works too. No need to feel targeted.

1 Like

Sorry Gueazy if that came over as offensive, that was not my intention. Your solution is simpler and more elegant, I just tried it :wink: :ok_hand:

I’ve been trying to help on this matter for a few days now without much success, so some of that frustration might have leaked through there.

2 Likes

Thank you for this, it’s extremely simple and works perfectly. CAnnot thank you enough

2 Likes

Thank you for all of your help kleinerpirat

1 Like

@GhostFlipper829 @Gueazy Many thanks for these two lines of elegant CSS code. I have been looking all over Google for just this bit of CSS for my Anki decks.

1 Like

I have also been looking for the aligned indent list solution.

I have tried to paste the codes to my style but didn’t work, do you mind sharing a screen capture of your current code?

Would really appreciate it!