Card layout: Center block of left-aligned text

[StephanBoltzmann]

Hello everybody out there using Anki,

Poems are often written in a way that all lines align to the left side of the longest line which in turn is centered.
The centered block of text looks good, while it is comfortable to go (read) from one left-aligned line to the next.
Is it possible to generate such a card layout?
It is certainly not trivial, because one would need to know each time in advance the length of the longest line.
With elaborated text processors like TeX would it is possible to generate such a layout.

[Rumo]

I think I tried to do this once in HTML but none of the solutions I could find online worked for me. I don’t think you’ll have more luck with LaTeX but if anyone has a solution for this, I’d like to know, too.

[hkr]

A simple solution would be something like this:

Front template:

<div class="centered-block">{{Front}}</div>

Styling(css):

.card {
    text-align: center;
}
.centered-block {
    display: inline-block;
    text-align: left;
    /* Uncomment if you want to set the maximum width of the block */
    /* max-width: 60vw; */
}

Screenshot:

[Rumo]

Simple, indeed. I wonder I missed that at the time.

[ankiflunky]

Hi! I’ve been looking for help on justifying the text on my cards on the left for a while now, and finally found this. But when I follow these instructions, it only changes the layout of my cards on the desktop (which I don’t use to study), not on my Android phone. Any advice you can give me? Center-aligned text looks quite awkward to me – I find it odd that that’s the default on Anki and that changing it is such a huge project.

[Rumo]

Making text left aligned is easy, just change text-align: center; to text-align: left;. This works for both desktop and mobile.
This topic was about centering a left aligned text block, which is a special case.
Ideally, you don’t have whole paragraphs on your cards, so centering text by default makes sense.

[Fried]

Hi, is it possible to just change the text aligned to the left on the back and not on the front, so that it stays in the center at the front?

[kleinerpirat]

Sure. Wrap your backside content in a <div class="back"></div> and then use

.back {
  text-align: left;
}