'Center Align' doesn't just affect vertical alignment

AnkiDroid (Android)
1

Minor issue: With ‘Center Align’ selected, the card is aligned vertically as expected, but the dimensions of the card and it’s horizontal alignment are also affected.

Center Alignment off:

1000024497
10000244971080×2340 125 KB

Center Alignment on:

1000024498
10000244981080×2340 119 KB

Another note, when displayed using the preview button from within the card editor, the card is displayed correctly. The display is only screwed up in the reviewer.

I don’t think it’s the style sheet, but I’ve included it just in case:

.card {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  color: #333333;
  background-color: #F6F6F6;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  padding: 24px;
  margin: 12px;
  border: 1px solid #D9D9D9;
}

#word {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 16px;
}

.details-summary {
  cursor: pointer;
  font-size: 16px;
  text-shadow: 1px 1px #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.details-summary:hover {
  color: #6495ED;
}

.details-summary:hover .arrow {
  transform: translateX(4px);
}

.arrow {
  fill: #777777;
  transition: transform 0.2s ease-in-out;
  margin-right: 8px;
}

.image img {
  max-width: 100%;
  height: 150px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  margin-top: 8px;
  transition: height 0.2s ease-in-out;
}

.image:hover img {
  height: auto;
}

.furigana {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 16px;
  text-shadow: 1px 1px #ffffff;
}

.meaning {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;
  text-shadow: 1px 1px #ffffff;
}

.cloze {
  font-weight: 900
}

#sentence {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 16px;
} 

.pitch {
  border-top: solid red 2px;
  padding-top: 1px;
}

.pitch_end {
  border-color: red;
  border-right: solid red 2px;
  border-top: solid red 2px;  
  line-height: 1px;
  margin-right: 1px;
  padding-right: 1px;
  padding-top:1px;
}

‘Debug Info’:

AnkiDroid Version = 2.18alpha8 (6fc26947fd31743bc83e68f17ae7fec64bfa8e62)

Backend Version = provider(?) (24.04 429bc9e14cefb597646a0e1beac6ef140f226b6f)

Android Version = 14 (SDK 34)

ProductFlavor = play

Manufacturer = samsung

Model = SM-S901U

Hardware = qcom

Webview User Agent = null

ACRA UUID = bd85dadb-68ae-4510-b361-9019967ff82d

FSRS Enabled = true

Crash Reports Enabled = true
2

You’re right. I just tried this on alpha8 and on jidoujisho note type that you’re using (with my own mod). But I’m thinking maybe it is supposed to display it on the actual “centre”?

Edit: This is what manual says: “”“however if you prefer your cards to be center aligned vertically in AnkiDroid then you can enable this feature.”“”

So I think it’s working fine?

3

…see below…

4

Does center align change the appearance in previewer?

5

If by previewer you mean previewing from within the card editor, no, center align does not change the appearance of the card.

Hoping to be clearer, all screenshots from the Reviewer…

Center Align off

1000024497
10000244971080×2340 125 KB

Center Align on

1000024498
10000244981080×2340 119 KB

What I expected it to look like with Center Align on

C
C1080×2340 161 KB

Maybe I just misunderstand what center align is supposed to do…

6

Yeah it puts stuff in the centre. The border around the cards get messed up though. I don’t know if it’s because of the card styling. Btw can you post this on the discord in mobile-apps channel?

7

Why would that be necessary or helpful?

8

I was told the AnkiDroid devs don’t visit forums. Don’t know from whom or when I heard that.

9

They can and do. But if this is really a bug, the next logical step would be to write an issue for it on github. Before doing that – @parishd , have you been able to reproduce this on a much simpler template – without the shadow-box, etc.?

1 Like