Hintergrundfarbe für einen ganzen Abschnitt mit einen <p> und <span>

    Hi,


    ich habe mit Abbyy FineReader (einem Programm zur Konvertierung von gescannten Vorlagen in Text) ein Buch als ePub gespeichert. ePub ist letztlich nichts weiter als HTML/CSS in einem Archiv. Daher ist die Editierung der Bücher ähnlich dem von HTML. Das vorliegende Buch hat kleine Zwischenabsätze mit Zusatzinfos eingefügt, die farblich durch eine andere Hintergrundfarbe abgehoben wird. FineReader hat das erstmal komplett ignoriert. Das ganze sieht in etwa so aus:


    Code
    <p><span style="font-weight:bold;">Überschrift</span></p>
<p>Absatz 1</p>
<p><span style="font-weight:bold;">Absatz 2</span>mit<span style="font-style:italic;">mehr</span>HTML</p>


    Jetzt Absatz steht zwischen einem eigenen <p> und falls etwas fett oder kursiv sein soll wird <span> genutzt. Das hat der FineReader so gemacht, ich kann - falls es eine bessere Lösung gibt - das nicht manuell im ganzen Buch ändern.


    Der Calibre Editor, den ich für die Editierung nutzte, kann auch Hintergrundfarben erstellen als

    Code
    <span style="background-color: rgb(219, 218, 211)">text</span>


    Das geht aber nur für einen einzelnen Absatz. Wenn ich den ganzen obigen Text in ein <span> fasse, passiert gar nichts:

    Code
    <span style="background-color: rgb(219, 218, 211)">
<p><span style="font-weight:bold;">Überschrift</span></p>
<p>Absatz 1</p>
<p><span style="font-weight:bold;">Absatz 2</span>mit<span style="font-style:italic;">mehr</span>HTML</p>
</span>


    Wenn ich die Hintergrundfarbe zu jedem <p> hinzufüge, habe ich keine durchgehende Hintergrundfarbe.


    Jemand eine Idee?

    Das Prinzip das hier zu Grunde liegt ist der Unterschied zwischen Inline- und Block-Elementen (block-inline-elemente-in-html)


    <span> ist ein Inline-Element.


    Der Grund weshalb der Validator hier meckert ist der, dass in Inline-Elementen nur Inline-Elemente zulässig sind.

    Grob ist die Regel so: In Block-Elementen sind sowohl Inline- als auch Block-Elemente zulässig. In Inline-Elementen sind nur andere Inline-Elemente zulässig.

    (Purer Text zählt hier zu Inline-Elementen)


    Das ist auch der Grund, weshalb der Hintergrund nicht zu sehen ist.

    Wenn man den <p> Elementen ein `display:inline` verpasst, oder sie in <span> Elemente ändert, klappt das auch mit dem Hintergrund.
    Dann muss man allerdings die Zeilenumbrüche selber setzen (zB mit <br/>)


    Grüße

    Andreas

    Ich muss das Thema nochmal hoch holen. Es wurde zwar im Editor korrekt erkannt, aber der Reader auf dem Tablet hat die Hintergrundfarbe nicht angezeigt.

    Zitat von Sempervivum

    Wenn ich das <span> auf display: inline-block; setze, funktioniert es. Muss ich das verstehen? Selfhtml sagt "anwendbar auf alle Element".

    Wie genau müsste ich das einfügen wenn ich z. B. schon


    Code
    <span style="background-color: rgb(219, 218, 211)">


    am Beginn des Blocks mit Hintergrundfarbe stehen habe?

    Ja, das meinte ich. Wird aber auch nicht angezeigt.


    Hat man mit HTML/CSS andere Möglichkeiten einen Hintergrund einzufügen? Vielleicht als Tabelle? Da müsste man aber sicherstellen, dass der Absatz sonst aussieht wie die anderen Absätze aus, z. B. was Abstände zum Rand angeht.

    Normaler Weise müsste es so funktionieren, wie webkriecher es angegeben hat. Keine Ahnung, warum der Reader es nicht anzeigt.

    AFAIK ist ein Semikolon hinter dem inline-block nicht zwingend erforderlich, aber zur Sicherheit versuche es dennoch damit:

    <span style="background-color: rgb(219, 218, 211); display: inline-block;">


    Ich finde da Validatoren für ePub, z. B. hier:

    https://www.ebookit.com/tools/bp/Bo/eBookIt/epub-validator

    Versuche mal, ob das Ergebnis dir weiter hilft.


    Oder gibt es bei dem Reader irgend welche Diagnosemöglichkeiten so wie die Entwicklerwerkzeuge im Browser?

    Ich vermute einfach mal, dass der Reader nicht alles unterstützt was ein Browser kann. Vielleicht ist der ePub-Standard auch abweichend vom HTML-Standard.


    Diesen Check hab ich gemacht, er bringt sogar sehr viele Fehler, die sich aber alle auf <figure> veziehen. Das sei wohl nicht erlaubt


    Code
    ERROR(RSC-005): ./books/Bo/databases/eBookIt/temp_uploads/1610870128.epub/main_split3.xhtml(98,31): Error while parsing file: element "figure" not allowed anywhere; expected the element end-tag or element "address", "blockquote", "del", "div", "dl", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "ins", "noscript", "ns:svg", "ol", "p", "pre", "script", "table" or "ul" (with xmlns:ns="http://www.w3.org/2000/svg")


    Ich verwende es um Bilder mit den dazugehörigen Bildunterschriften einzufügen. Der Finereader macht da immer Murks. Das wird interessanterweise im M+R perfekt angezeigt. Sollte aber nicht das Problem sein, da in den Absätzen mit Hintergrund fast nie Bilder drin sind.


    Ich werde mal die Entwickler des Reader kontaktieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden