Re: Anki/AnkiDroid: Feature request: 'Force line breaks' to avoid horizontal scrolling

[Houssam Salem]

Hello,

This is actually a feature in CSS. Simply apply the style "word-wrap: break-word;" to the card (or section of the card) and it'll do what you described.

See this for reference: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

On Saturday, September 15, 2012 9:16:49 PM UTC+10, DerJohannes wrote:

As of today, Anki (and AnkiDroid) is able to wrap lines only at word-separating character positions (like spaces or hyphens).

If you have long words (or long technical character sequences) without spaces or hyphens in your answer, like

"Lorem_ipsum_dolor_sit_amet_ex_pri_gloriatur_repudiandae"

the virtual screen will become as wide as the longest of these "unbreakable" words/sequences, which will make it necessary to scroll horizontally to read the answer.

An option like "Force line breaks" would be fine, either globally (for all decks) or as a deck-dependent option, to avoid horizontal scrolling.

Long character sequences would then be wrapped where they reach the end of the text box, like

"Lorem_ipsum_dolo
r_sit_amet_ex_pri_
gloriatur_repudiand
ae"

(Of course, this applies to questions, too.)

[DerJohannes]

Am Samstag, 15. September 2012 19:16:46 UTC+2 schrieb Houssam Salem:

This is actually a feature in CSS. Simply apply the style "word-wrap: break-word;" to the card (or section of the card) and it'll do what you described.

See this for reference: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

I create and edit Anki cards mainly with Anki for Windows (1.2.8) or with AnkiWeb, i.e. I am using three different Anki GUIs: Anki for Windows, AnkiWeb and AnkiDroid.

Until now, all my Anki card editing has been HTML/CSS "unaware", meaning that I never had to intentionally deal with HTML or CSS (plain text and images are all I need).

It would be great if this could stay like this and to have a global option for "Force line breaks". To me, it seems circumstantial to add a technical CSS property to every card I make (DRY!). Besides, this mixes content and style information.

Nevertheless, I tried to apply your hint and entered something like

<p style="word-wrap: break-word;">Lorem_ipsum_dolor_sit_amet_ex_pri_gloriatur_repudiandae</p>

to cards via AnkiWeb and via Anki for Windows 1.2.8.

Both tries failed with AnkiDroid. The corresponding text was not wrapped. What did I wrong?

My suggestion:
If line breaks within words are possible only with CSS, it would be great to have central CSS'es.

One CSS would have to be associated either with one deck, or globally with all the decks. IMHO, the CSS must not be placed in the context of a certain "Anki frontend" (like "Anki for Windows" and c:\Users\Johannes\AppData\Roaming\.anki\style.css), but in the context of the corresponding deck or AnkiWeb user), so that it can be used equally by all Anki frontends (Anki for Windows, AnkiWeb, AnkiDroid and so on).

[Houssam Salem]

I just tried it myself and for some reason this particular style property doesn't work in AnkiDroid (but it does on desktop). I'm not entirely sure why that may be. In any case, there is another word-breaking property that did work, so try this one instead: word-break: break-all;

Here's the spec for reference: http://www.w3.org/TR/css3-text/#word-break0

Stylesheets can be embedded in your template (add them inside <style> tags), so they will be part of the deck and not front-end specific. Anki2 gives you a field just for CSS, so it's a lot more obvious that this is the case, but I don't believe you can share them across decks.

The idea of a global style that gets applied to all your decks sounds useful. You might want to pitch that idea over at the Anki forums instead. For now, you're going to have to add that style rule to all your decks that need it.

[Damien Elmes]

In Anki 2 the CSS is shared for all cards of a given type of note. It
doesn't offer collection-level styles because there's no way for Anki
to know which collection-level styles are in use for a given note when
you export or import it into a collection.

> --
> You received this message because you are subscribed to the Google Groups
> "AnkiDroid" group.
> To view this discussion on the web, visit
> https://groups.google.com/d/msg/anki-android/-/7927LdyutUIJ.
>
> To post to this group, send an email to anki-a...@googlegroups.com.
> To unsubscribe from this group, send email to
> anki-android...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/anki-android?hl=en-GB.

[DerJohannes]

Am Sonntag, 16. September 2012 10:52:06 UTC+2 schrieb Houssam Salem:

I just tried it myself and for some reason this particular style property doesn't work in AnkiDroid (but it does on desktop). I'm not entirely sure why that may be. In any case, there is another word-breaking property that did work, so try this one instead: word-break: break-all;

Here's the spec for reference: http://www.w3.org/TR/css3-text/#word-break0

Stylesheets can be embedded in your template (add them inside <style> tags), so they will be part of the deck and not front-end specific. Anki2 gives you a field just for CSS, so it's a lot more obvious that this is the case, but I don't believe you can share them across decks.

Adding the following to the "Question" part of a deck's template ("Kartenlayout") did the trick (for both questions and answers):

###
<style type="text/css">

* {word-break:break-all;}

</style>

###

As Damien explained, collection-level styles are not as trivial to realize as expected due to conflicts and ambiguities after exporting and importing decks.

I am happy now. Thanks!