Iphone card alignment justification hyphen issues

[smoothington]

Hi, I’m looking to see if anybody has some advice for formatting cards for use on mobile/iphone. For my desktop cards, I have the text area justified, with a hyphens enabled so theres no huge word breaks. The problem is, I can’t seem to get the hyphens to work on my iphone. So instead of nice justified text where overflow text is broken and hyphenated, I’ll get huge gaps between words instead.

Here is an example:
Desktop card:

Ios card:

I’ll include the css I have used on desktop:
.nightMode #text, .night_mode #text, .iphone #text, .mobile #text {
max-width: 25rem !important;
margin-left: auto;
margin-right: auto;
text-align: justify;
text-justify: auto;
word-spacing: .05rem;
hyphens: auto !important;
line-height: 1.25rem;
text-align-last: center;
}

I’ve looked for anything in my styling that would mess with this, but I haven’t been able to find something interfering with this.

If anybody has any tips that would be appreciated.

[sprvlcn]

The Qt toolkit that Anki uses seems to support only a subset of HTML and CSS.

One time-consuming way might be to manually insert soft-hyphen characters.

So you could type in Inva­sive

Repeatedly entering this below:
Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive Inva­sive

[smoothington]

Hey thanks for your reply. I have wayyyy to many cards to plug that into each card, but nonetheless I appreciate your help

[sprvlcn]

By the way, in your desktop card the text isn’t justified. It’s just centered but not aligned with any margins on the sides.

If that looks okay to you, then maybe you can also abandon text justification for the mobile version.

[smoothington]

It is justified. I have the last line set to center so thats why that card looks that way. But if you look at the line spacing the first line is spread across the entire box.

At least thats what the rest of my cards look like

[dae]

If I remove the .mobile #text {} section from your card template, I can’t reproduce the large gap, so this is probably something Apple have improved in later iOS versions.