Per HTML Textblock einrücken

Mr. Brooks

Lt. Commander
Registriert
Aug. 2011
Beiträge
1.441
Hi,

es ist keine echte HTMNL-Frage, es geht um das ePub-Format für eBooks. Das verwendet aber ein dem HTML sehr ähnliches (oder gleiches) Format. Ich habe mit FineReader aus einem gescannten Buch ein ePub gemacht. Zu Beginn jedes Kapitels ist ein kurzer Erklärtext etwas vom restlichen Text abgehoben, er ist kursiv (was von FR erkannt wurde), grau statt schwarz und leicht eingerückt. Soweit ich das sehe wurden alle diese Textpassagen von FR bereits als eigene Klasse erkannt. Es würde also ausreichen die Einstellungen für die Klasse zu ändern. So sieht das z. B. aus:

Code:
<p class="calibre8"><span class="calibre10">Überschrift</span></p>
<p class="calibre8"><span class="calibre10">Text</span></p>

Und der entsprechende Teil der CSS-Datei

Code:
.calibre10 {
font-style: italic
}

Dachte das geht mit

Code:
padding:0px 0px 0px 20px

Da wird dann aber nur die 1. Zeile der Textblocks eingerückt. Die Überschrift komplett, aber die besteht ja nur aus einer Zeile.

Wenn ich das statt in der Klasse calibre10 in calibre8 eintrage wird das auf fast das ganze Buch übernommen, weil irgendwie viel mit dieser Klasse erstellt wurde - ist halt nicht von Hand, sondern Massenbearbeitung von 800 Seiten. Liegt es also an dem <span>-Tag?
 
Ja, es, liegt am <span> da es inline ist, also sich anders als ein Block zeilenorientiert verhält (und es Beginnt halt in der ersten Zeile und endet in der letzten, deswegen wirken sich Abstände nur dort aus). Man könnte mal probieren was mit einem zusätzlichen display:block passieren würde.
 
Du meinst in die CSS-Datei eintragen:

Code:
.calibre10 {
    font-style: italic;
    display:block;
    }

Da tut sich nichts, bleibt wie es bisher war.
 
Hast du mal ein ganzes Bsp. wie das aussehen muss? Mit padding davor hätte ich ja zwei Doppelpunkte drin, das geht nicht.
 
Ähm... bei CSS kommen die einzelnen Styles einfach per ; getrennt aneinander (gern auch in einzelnen Zeilen damit es übersichtlicher ist:

Code:
.calibre10 {
    font-style: italic;
    display:block;
    padding:0px 0px 0px 20px;
    }
 
  • Gefällt mir
Reaktionen: Mr. Brooks
Eine weitere Variante wäre, das padding auf das umschließende p-Element anzuwenden. Damit spart man das display:block auf das span.
 
Das Ansprechen des umgebenden P hatte ja Nebenwirkungen weil die Klasse noch an anderen Elementen hängt. Oder kann man in CSS mittlerweile rückwärts selektieren (also ein Element selektieren das ein bestimmtes Child hat)?
 
Es gibt leider (noch) keinen (CSS-)Parent-Selector.
Aus deinem Beispiel ist das aber nicht erkenntlich, und auch nicht wie viel Einfluss du auf die classes etc hast.
 
Leider sind die ganzen OCR-Programme recht kreativ beim anlegen verschiedener Klassen. Wenn die Scan-Vorlage noch schlechterer Qualität ist kann es sein es erstellt für jeden Absatz eine eigene Klasse. Dann hast du so viele Klassen wie Absätze im Buch - im Extremfall mehrere Tausend.
 
Zurück
Oben