Absatzstil via css als Liste darstellen?

[poisondwarf]

Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen? Geht das und wenn ja, wie muss ich das in der css schreiben?

Hintergrund:

Ich habe in einer xml-Datei eine Absatz-Formatvorlage "meineListe" definiert. Das Format "meineListe" ist nicht großartig definiert, ist eigentlich nur "Normal" unter anderem Namen. Im xml-Code sieht das so aus:

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>

Diese xml-Datei wird in html umgewandelt und auf einer Website angezeigt. Hier soll aber dieses Absatzformat als unsortierte Liste erscheinen, also mit <ul> und <li>.

Ich finde nur Sachen, über die ich vorhandene <ul>s und <li>s anpassen kann. Wenn es wirklich nicht geht, dann ändere ich die xml, aber ich hätte gedacht, dass das funktioniert.

Danke :)

[Matthias Scharwies]

Servus!

Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen?

Anzeigen nicht, aber aussehen lassen; z.B. durch ein Pseudoelement:

p::before {
 content: ●;
}

Danke :)

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@poisondwarf

Kann ich einen beliebigen Absatzstil mit Hilfe einer css-Definition als Liste anzeigen lassen? Geht das und wenn ja, wie muss ich das in der css schreiben?

Klar geht das. Die kannst mit CSS prinzipiell jeden Elementtypen wie einen anderen aussehen lassen. (Die Browser spielen bloß nicht bei allen Elementtypen mit.) Auch einen Absatz als Listenelement.

#Aber:

Im xml-Code sieht das so aus:

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>

<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>

Kein Element, das die ganze Liste auszeichnet?

Diese xml-Datei wird in html umgewandelt

Das geschieht wie? XSLT?

Und wie sieht das generierte HTML aus? So in der Art?

<p class="faux-li">Listenpunkt 1</p>
<p class="faux-li">Listenpunkt 2</p>

Wenn es wirklich nicht geht, dann ändere ich die xml,

Die Transformation wäre zu ändern, so dass im HTML tatsächlich eine Liste ist.

aber ich hätte gedacht, dass das funktioniert.

Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

LLAP 🖖

[Tabellenkalk]

Hallo,

Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Selbst wenn das so aussieht wie eine Liste, funktioniert es nicht so.

Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

Lass mal beide pupsen. Dann wirst du anderer Meinung sein.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ich will damit sagen, dass es bei Hengst oder Wallach ziemlich egal ist, ob 🐴 Pferd oder 🦄 Einhorn.

Lass mal beide pupsen. Dann wirst du anderer Meinung sein.

Zur Info für diejenigen, die mit Mädchen im Grundschulalter eher weniger zu tun haben: Einhörner pupsen Regenbogen (wissenschaftliche Erklärung).

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Zur Info für diejenigen, die mit Mädchen im Grundschulalter eher weniger zu tun haben: Einhörner pupsen Regenbogen (wissenschaftliche Erklärung).

Hihi, ziemlich witzig. Danke 😀

LG,
CK

[Gunnar Bittersmann]

@@Tabellenkalk

Willst du damit sagen, dass ich, wenn ich mein Pferd schwarzweiß anmale, es trotzdem nicht melken kann?

Wie jetzt, Pferd schwarzweiß anmalen?

(Foto: Muhammad Mahdi Karim, GFDL. Quelle: Wikimedia Commons)

LLAP 🖖

[ThomasM]

Hallo poisondwarf,

wenn das XML-Dokument direkt formatiert werden soll, dann in dieser Art:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="test.css" type="text/css"?>
<root>
  <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt1</text></para>
  <para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt2</text></para>
</root>

mit test.css:

root
{
  display: block;
  margin: 1em;
}

para > text
{
  display: list-item;
  list-style-position: inside;
}

Eine XSL-Transformation nach HTML könnte so aussehen:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html" version="5" encoding="UTF-8"/>

  <xsl:template match="root">
    <html>
      <head>
        <meta charset="UTF-8"/>
        <title>Test</title>
      </head>
      <body>
        <ul>
          <xsl:apply-templates select="para"/>
        </ul>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="para">
    <li class="{@styleclass}">
      <xsl:value-of select="text"/>
    </li>
  </xsl:template>

</xsl:stylesheet>

Wesentliche HTML-Ausgabe:

<ul>
  <li class="meineListe">Listenpunkt1</li>
  <li class="meineListe">Listenpunkt2</li>
</ul>

Grüße,
Thomas

[Gunnar Bittersmann]

@@ThomasM

Eine XSL-Transformation nach HTML könnte so aussehen:

        <ul>
          <xsl:apply-templates select="para"/>
        </ul>
  ⋮
  <xsl:template match="para">

Nicht wirklich, glaube ich.

Es könnte sicher auch andere para-Elemente geben, die nicht in die Liste zu packen wären. Diese sollen sicherlich p-Elemente im HTML sein.

Nur die para-Elemente mit Attribut styleclass="meineListe" sollen zu li werden, und das mit ul außenrum. Geht das mit XSLT überhaupt? Aus

<para><text>Absatz vor der Liste</text></para>
<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 1</text></para>
<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 2</text></para>
<para><text>Absatz nach der Liste</text></para>

soll werden:

<p>Absatz vor der Liste</p>
<ul>
	<li>Listenpunkt 1</li>
	<li>Listenpunkt 2</li>
</ul>
<p>Absatz nach der Liste</p>

Wesentliche HTML-Ausgabe:

<ul>
  <li class="meineListe">Listenpunkt1</li>
  <li class="meineListe">Listenpunkt2</li>
</ul>

Das ist nicht besonders sinnvoll. Wenn Klasse, dann so:

<ul class="meineListe">
	<li>Listenpunkt 1</li>
	<li>Listenpunkt 2</li>
</ul>

LLAP 🖖

[ThomasM]

Hallo Gunnar,

Nur die para-Elemente mit Attribut styleclass="meineListe" sollen zu li werden, und das mit ul außenrum. Geht das mit XSLT überhaupt? Aus

<para><text>Absatz vor der Liste</text></para>
<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 1</text></para>
<para styleclass="meineListe"><text styleclass="meineListe">Listenpunkt 2</text></para>
<para><text>Absatz nach der Liste</text></para>

soll werden:

<p>Absatz vor der Liste</p>
<ul>
	<li>Listenpunkt 1</li>
	<li>Listenpunkt 2</li>
</ul>
<p>Absatz nach der Liste</p>

Ein Ansatz in XSLT 2.0:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:output method="html" version="5" encoding="UTF-8"/>

  <xsl:template match="root">
    <html>
      <head>
        <meta charset="UTF-8"/>
        <title>Test</title>
      </head>
      <body>
        <xsl:for-each-group select="para" group-starting-with="para[not(@styleclass)]">

          <xsl:if test="current-group()[not(@styleclass)]">
            <p>
              <xsl:value-of select="text"/>
            </p>
          </xsl:if>

          <xsl:if test="count(current-group()[@styleclass]) > 0">
            <ul class="{distinct-values(current-group()/@styleclass)}">
              <xsl:for-each select="current-group()[@styleclass]">
                <li>
                  <xsl:value-of select="text"/>
                </li>
              </xsl:for-each>
            </ul>
          </xsl:if>

        </xsl:for-each-group>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Ergebnis:

…
<p>Absatz vor der Liste</p>
<ul class="meineListe">
  <li>Listenpunkt 1</li>
  <li>Listenpunkt 2</li>
</ul>
<p>Absatz nach der Liste</p>
…

Grüße,
Thomas