Centred left-aligned list

[da...@aeolia.co.uk]

I use AnkiDroid mostly, generally only using Anki for particularly complex edits.

On most of my cards I have the question and answer centred between the left and right page edges.  However, there is a particular set of cards where the answer consists of a list of short items, each on a separate line.  At the moment each item is centred, so that both right and left edges of the list are jagged.

I would like them to appear with their left-edges aligned, but with the list as a whole centred; in other word, the longest word would be centred between the page edges, and the other words would have their left edges vertically above/below the left edge of the longest word.

This could probably be done using a <table>, but it gets very complicated and I suspect there is probably a simpler way of doing it.  (I'm quite happy to create a new card type if necessary.)  Can anyone suggest a good way of getting the result I want?

David  

[Mike Hardy]

I am *guessing* (warning!) this is a use case for different CSS classes, the list should have different CSS padding to pseudo-center them (indent them really) but they should still be left-justified?

https://github.com/ankidroid/Anki-Android/wiki/Advanced-formatting

CSS is pretty incredibly powerful, I'd be surprised if it couldn't do what you want. You can use any browsers' developer tools to make a quick + tiny HTML page and play around with the idea to develop the correct class definitions, and or the HTML / javascript inspection to see it live https://github.com/ankidroid/Anki-Android/wiki/Development-Guide#html-javascript-inspection - although whatever you develop should be testable / visible on desktop too in case that's an easier way to dev

-Mike

--
You received this message because you are subscribed to the Google Groups "AnkiDroid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to anki-android...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/anki-android/a6c5421b-fc2f-41bf-a4bf-581f676f189en%40googlegroups.com.

[da...@aeolia.co.uk]

Like you, I'd be surprised if what I want can't be done!  The trouble is, I haven't yet managed to find a way of doing it, other than by using a table, which involves a huge number of tags for what, I feel, is a fairly simple requirement - basically a horizontally centred section or column with left-aligned text.

I looked at the page you suggested in the manual, but after quite a lot of experimentation, I still haven't managed to achieve the result I wanted.

David

[Hype Toriyama]

Hello "again",

I think instead of replying here I send a direct message or something. Therefore I post it again.

You can try

- a div block in the html-field in the editor

- a div block directly on the card-template on a new note-type

both either by typing the following attributes in the style flag, or by creating a class on the css-sheet and accessing the class.

the attributes are:

- text-align: left

- display: inline-block.

It would look like:

<div style="text-align: left; display: inline-block">

item 1

item 2

...

</div>

or  in the CSS-Sheet ("left" is the name I randomly chose):

.left {

 text-align: left;

 display: inline-block;

}

and on the card:

<div class="left">

item 1

item 2

...

</div>

Does this help?

[da...@aeolia.co.uk]

Thank you so much  - that does exactly what I want!

David