Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließtext

[godlike]

Folgendes Problem. Ich muss aus einem Print-Produkt ein Ebook erstellen. Habe mich erst mal für epub entschieden (auf Amazon etwas in der Anleitung gelesen). Die Daten für das Ebook enthalten leider nicht nur Fließtext sondern jede menge Symbole mit dazugehörigen Werten. Da ich keinen Schimmer hatte wie ich aus deinem Dump einer dBase Datenbank ein Ebook erstellen könnte hier folgender Workflow

• dBase-Dump in SQL-Datenbank importieren
• per PHP-Script als formatiertes HTML ausgeben
• HTML in Calibre laden
• epub exportieren

Funktioniert auch so wie gewünscht. Das fertige epub sieht in der Calibre Vorschau super aus. Leider auch nur da. Die Symbole im Fließtext fallen aus selbigem wenn ich das Ding auf dem Smartphone und einem Ebook-Reader öffne. (Cool Reader, FBReader).

So sollte es aussehen:



Und so kommt es raus:





Nun hab ich keinen schimmer wie ich die Bilder außer per Float in CSS in den Fließtext bekommen könnte. Jemand von euch eine Idee? Bin gerade in Calibre beim Bearbeiten des Quelltextes und der CSS. Ich hoffe das ich da weiter komme. Momentan werden die Bilder so angeordnet:

ul li img {
    float: left;
}

Viele grüße

godlike

 

[Jester]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

@godlike:

Hey,

standardmäßig sind Bilder inline, sollten also im Textfluss gerendert werden.
Nach Deinen Hints verwendest Du eine UL und wenn ich das richtig sehe, Überschriften.

Standard bei Überschriften ist display:block, die brauchen in diesem Fall eine Breitenbegrenzung und müssen auch floaten. Vermutlich stecken da noch paddings/margins drin, die eventuell auch stören.

Die LIs müssen ebenfalls eine Breitenbegrenzung haben und floaten.

Kannst Du mal bitte das HTML posten?

VG, J.

 

[godlike]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

Hey Jester,

ul li sind nicht enthalten, hab ich kurz nach dem verfassen des Postings selber gemerkt und bereinigt Momentan sieht der Output so aus:

[src=html4strict]<style type="text/css">
<!--
.content {
overflow: hidden;
margin-bottom: 3%;
padding: 1%;
}
h3.name {
font-size: 130%;
border-top-width: 1%;
border-bottom-width: 1%;
border-top-style: solid;
border-bottom-style: solid;
margin-top: 0.5%;
margin-bottom: 0.5%;
}
.ref {
float:right;
}
img {
float: left;
}
.pr1 {
padding-right: 1%;
}
-->
</style>
<div class="content"> <strong>Loprem</strong> Ipsum
<h3 class="name"><strong>Dolor</strong><span class="ref">0000</span></h3>
<div>123456789 Blah</div>
<div style="padding-top:1%;"><img src="symbol1.png" class="pr1">Ja <img src="symbol2.png" class="pr1"><img src="symbol3.png" class="pr1"><img src="symbol4.png" class="pr1">100 <img src="symbol5.png" class="pr1"><img src="symbol6.png" class="pr1"><img src="symbol7.png" class="pr1"><img src="symbol8.png" class="pr1"><img src="symbol9.png" class="pr1">25 <img src="symbol10.png" class="pr1">
<div style="padding-top:1%;">ipsum dolor</div>
</div>
<br style="clear:both">
</div>

[/src]

 

[Jester]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

@godlike:

Das Float von den Bildern weg, display:inline (falls die aus irgendeiner Vererbung auf block stehen). Dann haben die IMG's ein padding, dad jibbet nit, margin statt dessen.

Teste mal.

Gruß, J.

 

[godlike]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

Also manchmal sieht man den Wald vor Bäumen nicht Ich teste das mal

Edit: Ok, selbes Problem ohne display:inline. Hab in Calibre jetzt mal das CSS angesehen. Calibre fügt in der Tat ein display:block zum Content hinzu. Habe jetzt mal manuell ein display:inline bei img hinzugefügt.

Edit 2: Ok sauber, das hat in der Tat was geholfen. Zwar noch nicht perfekt aber viel besser. Danke Jester

Edit 3: Zu früh gefreut. FBReader zeigt alles einigermaßen korrekt an, Cool Reader nach wie vor schlecht. Ich schau mal weiter.

 

[Jester]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

Eine andere Idee: beliebige Block-Level-Elemente, feste Breite, float:left, als Hintergrundgrafik das Symbol links ansetzend, padding-left für den Abstand von Symbol zu Label?

 

[godlike]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

Hast du dazu ein Beispiel? Du musst wissen das es sich teilweise um ~ 1500 Content-Elemente mit jeweils bis zu 50 Grafiken und Werte handelt. Und das wenn ich nur einen Bereich ausgebe. Beim ganzen Buch wären das eher 10k Content-Elemente. Also wegen festen Breiten usw.

Edit: Ach jetzt! Verstehe was du meinst. Ja könnte ich mal probieren...

 

[Jester]

Re: Ebook (epub) erstellen: SQL -> PHP -> HTML -> Calibre -> Bilder fallen aus Fließt

Naja vereinfacht so:

[src=html4strict]
...
<style>
.bullet{
padding-left:[Icon-Breite + Abstand zum Label]px;
width:[sinnvoller Breitenwert]px;
height:[sinnvoller Breitenwert]px;
line-height:[height minus 2px]px; // für die vertikale Zentrierung des Labels
float:left;
margin-right:[sinnvoller Abstand zum nächsten Element]px;
}
.icon1{
background:url(icon1.png) left center no-repeat;
}
.icon2{
background:url(icon2.png) left center no-repeat;
}
.icon3{
background:url(icon3.png) left center no-repeat;
}
</style>

...

<div>
<div class="bullet icon1">Ja</div>
<div class="bullet icon2">Nein</div>
<div class="bullet icon3">Vielleicht</div>
</div>

...

[/src]