Darstellung der Zahlen der Listenelemente in ol in PDF

Microsoft *.xps, Adobe *.pdf
Manuel
Beiträge: 16
Registriert: Fr Okt 16, 2015 08:34

Darstellung der Zahlen der Listenelemente in ol in PDF

Beitrag von Manuel »

Hallo zusammen,

vielleicht hat ja einer eine Idee, wie sich folgendes Problem lösen lässt:
Ausgangssituation: eine Schritt für Schritt-Installationsanleitung als Ordered List. In den Listenelementen sind Lauftext, Bild und Bildunterschrift enthalten.
Das Ganze ist mittels „figure“ innerhalb eines div-Containers innerhalb eines Listenelements gelöst. Als HTML-Ausgabe ist alles schick, schaut so aus, wie es sein sollte.
Problem ist die PDF-Ausgabe: Hier sind die Inkrementzahlen der ol neben dem Listeelement horizontal zentriert, statt oben links wie gewöhnlich dargestellt zu werden. Füge ich zwischen <li> und <div> Text ein, erfolgt die Ausrichtung wieder richtig, aber an der Stelle ist der Text nicht erwünscht.
Hat jemand eine Idee, wie ich das lösen kann?

Auszug HTML:

Code: Alles auswählen

        <ol>
            <li>
                <div>
                    <figure>
                        <img>
                        <figcaption>Die Datei Setup.exe im Windows-Explorer.</figcaption>
                    </figure>
                    <p>Nach dem Einlegen der CD beginnt die Installation automatisch oder kann manuell durch die Datei <span>setup.exe</span> gestartet werden.</p>
                </div>
            </li>
Auszug CSS:

Code: Alles auswählen

/*<meta>*/

figure.figureGroup
{
	float: left;
}

figcaption.figcaptionGroup
{
	clear: both;
	mc-auto-number-format: 'GF:Abb. {chapnum+}-{n+} ';
}

figure.pictureLeft
{
	float: left;
	width: 30%;
	margin: 8px 0;
	overflow: hidden;
	margin-right: 8px;
}

figure.pictureRight
{
	float: right;
	width: 30%;
	margin: 8px 0;
	overflow: hidden;
	margin-left: 8px;
}

figure.pictureLeft img
{
	width: 100%;
	height: auto;
}

figure.pictureRight img
{
	width: 100%;
	height: auto;
}

div.floatpicture::after
{
	clear: both;
	content: " ";
	display: block;
	height: 0px;
}
figcaption
{
	font-size: 8pt;
	margin-top: 0;
	font-weight: normal;
	font-style: italic;
	line-height: normal;
	mc-auto-number-format: 'Abb. {chapnum}.{chapnum}-{n+}: ';
}

figure
{
	margin-left: 0;
	font-family: Open Sans;
}

@media print
{
	figure.pictureLeft img
	{
		max-width: 30%;
		max-height: auto;
	}

	figure.pictureRight img
	{
		max-width: 30%;
		max-height: auto;
	}

Edit: Leider geht der Großteil des HTML-Quellcodes bei Copy&Paste verloren, zumindest in der Vorschau. Ist das normal?

Benutzeravatar
Jörg Ertelt
Moderator
Beiträge: 2183
Registriert: Mo Jun 20, 2005 23:41

Beitrag von Jörg Ertelt »

Guten Tag Manuel,

==
Das Ganze ist mittels „figure“ innerhalb eines div-Containers innerhalb eines Listenelements gelöst.
==

Warum so kompliziert?

Folgendes ist ausreichend, ohne div-Gefummel, einfach durch Anwendung von p auf ol:

<ul>
<li>
<p>Das ist</p>
</li>
<li>
<p>das Haus</p>
<p>
<img src="Resources/Images/nikolaushaus.jpg" class="bilformatvorlage" />
</p>
<p class="bildunterschrift">Bildunterschrift</p>

</li>
<li>
<p>vom Nikolaus</p>
<table style="width: 100%;">
<col />
<col />
<tbody>
<tr>
<td>&#160;</td>
<td>&#160;</td>
</tr>
</tbody>
</table>
</li>
</ul>

Für die Bildunterschrift gibt es eine eigene Formatvorlage als Kind von p: Bildunterschrift.
Dto. für das Bild selber (wenn es eine Formatvorlage benötigt) als Kind von img: bilformatvorlage

Das Ganze funktioniert, wenn der ol (gilt auch für ul) ein Absatzelement hinzugefügt wird, genauer: Es wird den li hinzugefügt mit Rechtsklick auf ol / ul > Absatzelement(e) hinzufügen. p kann auch einzelnen li hinzugefügt werden: Rechtsklick auf einem li > Absatzelement(e) hinzufügen.

==
Edit: Leider geht der Großteil des HTML-Quellcodes bei Copy&Paste verloren, zumindest in der Vorschau. Ist das normal?
==

Im Forum muss die Option "HTML in diesem Beitrag deaktivieren" gewählt sein. Die Einrückungen gehen trotzdem hopps.
Viele Grüße

Jörg Ertelt, Certified Flare Instructor

MADCAP SOFTWARE
:: Lizenzen kaufen / upgraden
:: Offene und Firmenseminare

SUPPORT
:: Flare-Forum
:: Flare-Knowledgebase

HELPDESIGN • JÖRG ERTELT
Ulrichstraße 1
D-73240 Wendlingen am Neckar
www.helpdesign.eu

Manuel
Beiträge: 16
Registriert: Fr Okt 16, 2015 08:34

Beitrag von Manuel »

Hallo Jörg,

vielen Dank für Deine Anregung.
Warum so kompliziert?

Folgendes ist ausreichend, ohne div-Gefummel, einfach durch Anwendung von p auf ol:
Leider ist das in der Form nicht ganz ausreichend. Zunächst sollen nämlich Bilder und Bildunterschriften grundsätzlich zusammengehalten werden. An der Stelle brauche ich also schon einmal einen Container. Desweiteren muss dieser Container dann vom Lauftext umflossen werden. Außerdem brauchen wir die Möglichkeit, den Container sowohl links-, als auch rechtsbündig zu platzieren. Die BU muss allerdings immer linksbündig unterhalb des Bildes sein.
Wie gesagt, bei HTML klappt auch alles und sieht schick aus, nur bei PDF taucht das Problem mit der falschen Zentrierung der Listennummern auf.

Zweiter Versuch Code: ;)

Code: Alles auswählen

        <ol>
            <li>
                <div class="floatpicture">
                    <figure class="pictureLeft figureList">
                        <img src="../../Resources/Images/Benutzerhandbuch/Installationsschritte.png" style="visibility&#58; visible;mc-thumbnail&#58; popup;mc-thumbnail-max-height&#58; auto" />
                        <figcaption MadCap&#58;autonum="Abb. 1-1&#58; ">Die Datei Setup.exe im Windows-Explorer.</figcaption>
                    </figure>
                    <p>Nach dem Einlegen der CD beginnt die Installation automatisch oder kann manuell durch die Datei <span class="Lauftext_Funktion">setup.exe</span> gestartet werden.</p>
                </div>
            </li>

Benutzeravatar
Jörg Ertelt
Moderator
Beiträge: 2183
Registriert: Mo Jun 20, 2005 23:41

Beitrag von Jörg Ertelt »

Verstehe.

Für die Analyse wird das komplette Projekt einschl. Bilder benötigt. Da ich aktuell keine Zeit zum Analysieren habe, würde ich das Projekt an MC weiterleiten.
Als Ursache kann eine falsche Deklaration im CSS für die Druckausgabe oder ein Bug seitens Flare in Betracht kommen. Im letzteren Fall müsste sich MC ohnehin darum kümmern.

Bitte formuliere eine englische Beschreibung des Sachverhalts und sende diese inkl. des Projekts an mich.
Viele Grüße

Jörg Ertelt, Certified Flare Instructor

MADCAP SOFTWARE
:: Lizenzen kaufen / upgraden
:: Offene und Firmenseminare

SUPPORT
:: Flare-Forum
:: Flare-Knowledgebase

HELPDESIGN • JÖRG ERTELT
Ulrichstraße 1
D-73240 Wendlingen am Neckar
www.helpdesign.eu

Manuel
Beiträge: 16
Registriert: Fr Okt 16, 2015 08:34

Beitrag von Manuel »

Werde ich machen, danke :)

Benutzeravatar
Jörg Ertelt
Moderator
Beiträge: 2183
Registriert: Mo Jun 20, 2005 23:41

Beitrag von Jörg Ertelt »

ok
Viele Grüße

Jörg Ertelt, Certified Flare Instructor

MADCAP SOFTWARE
:: Lizenzen kaufen / upgraden
:: Offene und Firmenseminare

SUPPORT
:: Flare-Forum
:: Flare-Knowledgebase

HELPDESIGN • JÖRG ERTELT
Ulrichstraße 1
D-73240 Wendlingen am Neckar
www.helpdesign.eu

Antworten