# Iphone card alignment justification hyphen issues

**URL:** <https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467>\
**Category:** Help\
**Created:** [December 16, 2023, 6:37pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467 "2023-12-16T18:37:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![smoothington](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@smoothington](https://forums.ankiweb.net/u/smoothington)\
**Post date:** [December 16, 2023, 6:37pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/1 "2023-12-16T18:37:13Z")

</div>

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:

 ![Screen Shot 2023-12-16 at 1.30.18 PM](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/8/b/8b69b3e1d9980914a6f2f37fba3cdf72560d5dc7.jpeg)

Ios card:

 ![IMG_3960](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/4/c46453aabc891ddd6246394b056e36f1f657e62a.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![sprvlcn](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@sprvlcn](https://forums.ankiweb.net/u/sprvlcn)\
**Post date:** [December 16, 2023, 7:11pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/2 "2023-12-16T19:11:25Z")

</div>

The Qt toolkit that Anki uses seems to support only [a subset of HTML and CSS](https://doc.qt.io/qt-6/richtext-html-subset.html).

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

So you could type in `Inva&shy;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

---

<div class="post-metadata">

**Author:** ![smoothington](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@smoothington](https://forums.ankiweb.net/u/smoothington)\
**Post date:** [December 16, 2023, 10:03pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/3 "2023-12-16T22:03:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sprvlcn](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@sprvlcn](https://forums.ankiweb.net/u/sprvlcn)\
**Post date:** [December 16, 2023, 10:08pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/4 "2023-12-16T22:08:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![smoothington](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@smoothington](https://forums.ankiweb.net/u/smoothington)\
**Post date:** [December 16, 2023, 10:11pm UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/5 "2023-12-16T22:11:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [December 18, 2023, 12:26am UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/6 "2023-12-18T00:26:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [January 17, 2024, 12:27am UTC](https://forums.ankiweb.net/t/iphone-card-alignment-justification-hyphen-issues/38467/7 "2024-01-17T00:27:14Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.