Text läuft seitlich über Bildschirmrand hinaus, bricht nicht um.

schmittlauch

New member
Ich habe mir mit dem Tool pandoc automatisiert aus Markdown Dateien ein epub erstellt, dessen Formatierung leider, aber auch verständlicherweise nicht perfekt ist.
In der automatisch erstellten Variante Anhang anzeigen lyah-en.epub laufen die Quelltextbeispiele, bei zu langer Zeilenlänge seitlich aus dem Bildschrim meines Pocketbook Ultra, anstatt umzubrechen. Um dies zu beheben, habe ich das CSS des Ebooks angepasst und für das code Tag folgende CSS Eigenschaften hinzugefügt:

-epub-word-break: break-all; -epub-line-break: auto; word-wrap: break-word; overflow-wrap: break-word;

Im Calibre-Viewer sowie im FBReader am PC hat das auch den gewünschten Effekt, der Text wird wie gewünscht umgebrochen. Mein Pocketbook Ultra hingegen ist unbeeindruckt und bricht den Text immer noch nicht um.
Habe ich etwas vergessen oder ist das eher ein Bug in der Reader Software?


Liebe Grüße an die Menschen, die sich mit epub und CSS auskennen
schmittlauch
 

Martina Schein

Freizeit-Nerd-Grufti
Mal davon abgesehen, dass zahlreiche Verknüpfungsfehler bestehen (siehe folgenden Screenshot), zeigt Calibre - im Gegensatz zu Sigil - das Cover als letzte Datei an. Mein Reader tut dies ebenfalls. Dies liegt am Attribut linear=\"no\" in der Datei content.opf im Bereich spine. Dies wird auch in der Fehlersuche moniert. Besser ist linear=\"yes\" und die Einrückungen direkt im Inhaltsverzeichnis vorzunehmen. Oder das linear-Attribut ganz weglassen.


Fehlermeldungen in Calibre:
lyah-en_Calibre-Fehlermeldungen.png




Die Anweisungen

-epub-word-break: break-all; -epub-line-break: auto; word-wrap: break-word; overflow-wrap: break-word;


findet der Calibre-Editor nirgendwo im eBook, weder in der Stylesheet-Datei noch in den Texten.




Auf meinem Kobo Aura H2O sehen die Texte allerdings auch korrekt aus (Screenshots):


lyah-en_Ansicht-auf-dem_Kobo-Aura-H2O_01.png lyah-en_Ansicht-auf-dem_Kobo-Aura-H2O_02.png




Für eine genauere Prüfung fehlt mir heute die Zeit. An Deiner Stelle würde ich mir mal die Einstellungen im Ultra ansehen und ein wenig damit rumspielen. Eventuell auch ein Firmware-Update machen, falls nicht die aktuelle drauf ist.




Wie sieht es denn bei Deinen anderen Büchern auf dem Ultra aus? Werden bei denen die Zeilen ebenfalls nicht umgebrochen?
 

schmittlauch

New member
Danke für die schnelle Antwort, Martina.
Das epub aus dem Anhang war unmodifiziert, die Version mit dem modifizierten CSS kannst Du hier finden:
Um den Link zu sehen, bitte Anmelden oder Registrieren



Der normale Fließtext des Buches wird ohne Probleme umgebrochen, nur der der Codebeispiele eben nicht. Längere Codebeispiele kannst Du zum Beispiel gegen Ende von chapter 2 finden, oder Du stellst die Schriftgröße einfach auf sehr groß ein. Bei der modifizierten Version müsste der Quelltext jetzt im Calibre Viewer umbrechen, auf dem Ultra tut er es aber eben nicht.
 

Martina Schein

Freizeit-Nerd-Grufti
Danke für die schnelle Antwort, Martina.
Das epub aus dem Anhang war unmodifiziert, die Version mit dem modifizierten CSS kannst Du hier finden:
Um den Link zu sehen, bitte Anmelden oder Registrieren
Dein Link ruft eine 404er Fehlerseite auf (404 Not Found).




Ja, bei den code-Angaben ragt die Zeile auf meinem Reader ebenfalls über den rechten Rand hinaus.


Datei ch002.xhtml, Zeile 80 (Dies ist ein Beispiel, die folgende Klasse und ähnliche findet sich auch an etlichen anderen Stellen.)


<pre class=\"haskell: ghci\" name=\"code\">
Klassen-Attribute mit einem Doppelpunkt sind mir unbekannt. Aber okay, das heißt nicht, dass es sie nicht gibt. Definitiv gibt es jedoch keine Klasse namens ».ghci« in der styleshett.css, ebenso wenig eine Style-Definition am Anfang des Dokumentes.


<pre> (vorformatiert) wird, so weit ich weiß, in ePub-Dokumenten bis zur Version 2.1 nicht unterstützt. Mein Reader zeigt hier auch, wenn ich die Standard-Schrift einstelle, keine Schriftveränderung.


<code> wird meines Wissen nach in ePub-Dokumenten bis zur Version 2.1 nicht unterstützt. Mein Reader zeigt hier, wenn ich die Standard-Schrift einstelle, ebenfalls keine Schriftveränderung.




In Zeile 13 der gleichen Datei finde ich:
<div id=\"starting-out\" class=\"section level1\">
Es gibt in der Stylesheet-Datei und auch am Beginn des Dokumentes jedoch keine Klasse ».section level1«.


Würde ich weiter suchen, fände ich sicherlich noch etliche andere Definition, die in der stylesheet.css fehlen.


...


Das Ganze hat mir ja mal wieder keine Ruhe gelassen. So - ich habe mal etwas auf die Schnelle gebastelt:

  • alle <pre class ...>-Tags entfernt
  • alle in der stylesheet-css nicht vorhandenen css-Klassen in den xhtml-Dateien entfernt
  • xhtml-Dateien in eine vernünftiges Ansicht gebracht


Nun ragt nichts mehr über den rechten Rand hinaus. An Deiner Stelle würde ich diese Abschnitte jedoch linksbündig (text-align: left;) setzen und vielleicht mit Zeilenabständen arbeiten (<br/>-Tags).


Das <code>-Attribut habe ich daher in den xhtml-Dateien stehen gelassen. Vielleicht arbeitest Du hier auch mit einer eingebetteten Schriftart und kannst dann leichter suchen und ersetzen. Linksbündig würde ich es aber dennoch setzen.




Um die falschen Verlinkungen - siehe den Screenshot in meinem Posting von heute morgen - musst Du Dich auch noch kümmern.




Hier gibt es die modifizierte Datei.
Anhang anzeigen modifiziert_lyah-en.epub
 

schmittlauch

New member
<pre> (vorformatiert) wird, so weit ich weiß, in ePub-Dokumenten bis zur Version 2.1 nicht unterstützt. Mein Reader zeigt hier auch, wenn ich die Standard-Schrift einstelle, keine Schriftveränderung.

Bei mir ist schon ein signifikanter Unterschied sichtbar, es fehlen nämlich plötzlich die vordefinierten Zeilenumbrüche in den code samples, wodurch sie nahezu unlesbar geworden sind.
 

Martina Schein

Freizeit-Nerd-Grufti
Bei mir ist schon ein signifikanter Unterschied sichtbar, es fehlen nämlich plötzlich die vordefinierten Zeilenumbrüche in den code samples, wodurch sie nahezu unlesbar geworden sind.
Deshalb meinte ich ja oben:


Nun ragt nichts mehr über den rechten Rand hinaus. An Deiner Stelle würde ich diese Abschnitte jedoch linksbündig (text-align: left setzen und vielleicht mit Zeilenabständen arbeiten (<br/>-Tags).
Du brauchst hier einfach nur nach diesem Begriff zu suchen: <code>


Bei mir wurden im Reader der Code teilweise als Blocksatz angezeigt und das sieht, wenn nur zwei bis drei Begriffe in einer Zeile stehen, auch nicht wirklich gut aus.
 
Oben