How to use Hyphenation for German?

Anki Card Design
1

Background

I reviewed my Anki cards with Anki on my linux desktop for a very long time. But now I additionally use AnkiDroid to review my cards.

On my laptop cards are displayed without issue, even if they include long german words. But the same isn’t true for AnkiDroid. I read that this could be solved using hyphenation css.

Desired Result

I’d like my long german words to be split correctly.

Actual Result

The words split as soon as the space for them runs out.

anki
anki301×457 12.2 KB

(see B. C uses #2, see below)

Things Tried

  1. I tried this: Hyphenation for German.
  2. And I tried using ­.

Result & Issues

Number 1 doesn’t work but number 2 does. I cannot really manually apply #2 to all of my cards (more than 1000) though. Besides, according to MDN setting hyphens: auto should work without me doing any addtional work. Also, anki uses Qt 6.8.1 which according to the link hkr provided should support hyphens.

The search in Anki for this word won’t work anymore if there’s a ­ inside.

And I dislike that anki replaces the ­ with a red dot in the html view, where I’d expected ­ instead:

anki
anki1380×395 38.7 KB

My Code

  1. Create a new basic card with the following text in the back (as html)
<ol type="A"><li>…<br></li><li>Die Symptome führen zu Funktionsbeeinträchtigung oder Leidensdruck.</li><li>Die Symptome führen zu Funktions&shy;beeinträchtigung oder Leidensdruck.</li><li>…</li></ol>
  1. Then the back template:
<div class="narrow" lang="de">
	{{FrontSide}}

	<hr id=answer>
	{{Back}}
</div>
  1. And the css (red border and max-width is for visualization):
.card {
    font-family: "Liberation Sans";
    font-size: 22.5px;
}


.narrow {
	max-width: 250px;
	border: red solid 2px;
	hyphens: auto;
}

Questions

  • Am I doing something wrong here?
  • Is my only option to use a js library (or do it manually)?
2

If you safe the following code as index.html and open the file in firefox (or my case librewolf, a firefox fork), then the hyphenation works perfectly fine:

anki
anki1917×874 92.8 KB

<html>
	<head>
		<style>
			.narrow {
				max-width: 250px;
				border: red solid 2px;
				hyphens: auto;
			}
		</style>
	</head>
	<body>
		<div class="narrow" lang="de">
			<ol type="A"><li>…<br></li><li>Die Symptome führen zu Funktionsbeeinträchtigung oder Leidensdruck.</li><li>Die Symptome führen zu Funktions­beeinträchtigung oder Leidensdruck.</li><li>…</li></ol>
		</div>
	</body>
</html>

I changed the webview in anki using the dev console to contain the exact same content and it doesn’t work:

anki
anki1920×1069 186 KB

From that I gather that anki doesn’t support hyphens for some reason.

3

What about trying that in Chrome? I believe that Firefox has more extensive language support.

4

The problem might be that the version of chromium in the QtWebEngine supports hyphens but does not bundle the hyphenation dictionaries.

Unfortunately it looks like the proposed @hyphenate-resource never got implemented by anyone so you cannot provide the dictionary yourself like with fonts.

Have you checked if hyphenation works in AnkiDroid or only the desktop app? The Android WebView might be more feature complete.

It’s obviously not ideal but if the main problem is small screens and it works on AnkiDroid the CSS might be enough. :man_shrugging:

3 Likes
5

German language dictionaries are supported for a very long time – though I confess I didn’t try it myself outside of LibreWolf and Anki. But I guess the following explains it:

You’re very right! It actually does work flawlessly on AnkiDroid. The only nitpick I have is that hyphenate-limit-chars doesn’t work (link to MDN).

I just reviewed my cards with hyphens: auto; set on AnkiDroid and it’s actually pretty alright – and much better than before. So no need to see if hyphenate-limit-chars can be made working somehow.

Is this an issue with Qt? Or did Anki disable including hyphenation dictionaries during its build (if that’s even possible)?

1 Like
6

The MDN article says that hyphenate-limit-chars should be supported from “WebView Android 109”. I’m currently on Android System WebView Version 132.0.6834.164. Maybe you are running an old version and can update it?

I have no idea. Qt and the Anki build system are a bit arcane and I have not dug too deeply into how they work.

1 Like
7

Yes, I’m on v103. My Android 11 is EOL though, so no further updates.

Thanks for your help!

8

APKMirror claims that current versions should work with Android 11.

It can be updated through Google Play. You might just need to manually start the update.

1 Like
9

I’m on a custom Android phone (LineageOS) without google apps installed (so basically everything is AOSP Android). I can find and install the Android System WebView Beta and Android System WebView Dev apparantly – but I won’t do that just for a single non-essential css thingy.

I barely use this phone anyways – just for calling, AnkiDroid and Bus tickets (because we now need apps for that…). And considering it was supported from Android 8.1 upto Android 11 and still works perfectly fine (just like new), I don’t really feel like getting a new device either.

I wish I could just install debian on it and receive lifelong updates…