it-swarm.com.de

Nummerierte Liste mit Unterabschnitten

Ich versuche, ein juristisches Dokument mit dezimal nummerierten Unterabschnitten zu erstellen, gefolgt von alphanumerischen Unter- und Unterabschnitten. (Wütend!)

`1. HAUPTKOPF

1.1 This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number
1.2 In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.  See below for the remaining clauses
    (a) this list is completely for demonstration and should  not be construed as legal language in any way, nor should make sense in that
    (b) should the indentation take  more than:
        i) this many lines it would be overly big
        11) legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block
        iii) and continue the formatting on to the next line but be underneath the body of the the text and not begin directly below the number itself. In this example the text carries out to the right but I need it to wrap around underneath.

Tut mir leid, es ist so wortreich, ich brauche das, um das Beispiel zu zeigen. 2. Überschrift der zweiten Klausel 2.1 und so geht es so weiter
Ich habe die Beispiele für die Dezimalzahl gefunden, aber sie erzeugen keinen Block rechts von der Zahl, und sie führen mehrere Dezimalstellen anstelle von alphanumerischen und lateinischen Untersätzen fort.

5

Sie können fast alle Ihre Anforderungen mit verschachtelten geordneten Listen und einfachem CSS erfüllen, um Alpha-Aufzählungszeichen (a, b, c) oder römische Ziffern (i, ii, iii) festzulegen.

Dieser Aufschlag:

<ol class="main">
    <li>MAIN HEADING
        <ol>
            <li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
            <li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.  See below for the remaining clauses
                <ol>
                    <li>this list is completely for demonstration and should  not be construed as legal language in any way, nor should make sense in that</li>
                    <li>should the indentation take  more than:
                        <ol>
                            <li>this many lines it would be overly big</li>
                            <li>legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block</li>
                            <li>and continue the formatting on to the next line but be underneath the body of the the text and not begin directly below the number itself. In this example the text carries out to the right but I need it to wrap around underneath.</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Second Clause Heading
        <ol>
            <li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
            <li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.  See below for the remaining clauses</li>
        </ol>
    </li>
</ol>

Und dieses grundlegende CSS

ol.main > li > ol > li > ol {list-style-type:lower-alpha}

ol.main > li > ol > li > ol > li > ol {list-style-type:lower-roman}

Erreicht diesen Effekt:

enter image description here

Der Schlüssel, der fehlt, sind die dezimal nummerierten Unterabschnitte , aber wir können die Eigenschaften counter-reset, counter-increment und content zum Hinzufügen verwenden diese. Beachten Sie, dass diese Eigenschaften von IE6 oder IE7 nicht erkannt werden.

Dies ist das zusätzliche zu verwendende CSS:

ol.main > li {
    counter-increment: root;
}

ol.main > li > ol {
    counter-reset: subsection;
    list-style-type: none;
}

ol.main > li > ol > li {
    counter-increment: subsection;
}

ol.main > li > ol > li:before {
    content: counter(root) "." counter(subsection) " ";
}

Die ersten drei Selektoren weisen den Listenelementen Namen zu und zählen, wie viele verwendet werden. Die letzte Auswahleinrichtung fügt die Nummern am Anfang des Listenelements hinzu, d. H. 1.1, 1.2, 2.1, 2.2 usw. ist [Wurzelnummer] [Punkt] [Unterabschnittsnummer] [Leerzeichen].

Der letzte Bildschirm sieht folgendermaßen aus:

enter image description here

Hier ist eine Demo - http://blog.ajcw.com/demo/lists.html

6
ajcw

Ich denke, das ist so nah, wie Sie mit CSS bekommen können. Die legale Nummerierung wird nicht durchgeführt, und die Alphanummerierung enthält nur eine Klammer, aber das meiste, was Sie wollen.

<html>
<head>
<style type="text/css">
ol.a {list-style-type:decimal;}
ol.b {list-style-type:lower-alpha;}
ol.c {list-style-type:lower-roman;}
</style>
</head>

<body>
<ol class="a">
<li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
<li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.  See below for the remaining clauses</li>
<ol class="b">
<li>this list is completely for demonstration and should  not be construed as legal language in any way, nor should make sense in that</li>
<li>should the indentation take  more than:</li>
<ol class="c">
<li>this many lines it would be overly big</li>
<li>legal numbering continues in the sub-sub clauses with the use of lower roman lettering and should flow below in a block</li>
<li>and continue the formatting on to the next line but be underneath the body of the the text and not begin directly below the number itself. In this example the text carries out to the right but I need it to wrap around underneath.</li>
</ol>
</ol>
</ol>

</body>
1
paulmorriss

Mit Counter styles können Sie Dezimallisten anzeigen, und die CSS-Eigenschaft list-style-type formatiert Ihre Unterklauseln mit alphanumerischen Zeichen:

Ergebnis (Bild)
css numbered lists for legal documents using counter styles

HTML

<div id="example">
<ol>
    <li class="heading">Main Heading
    <ol>
        <li>This is an example of a sub-clause and you can see that even though the words continue on to the right, it would be best if it wrapped around and formed a block to the right of the decimal number</li>
        <li>In doing so the normal second clause should also wrap around but the second subsequent clause should hang in from the left and be in a block.
        <ol>
            <li>Second-level clause</li>
            <li>Second-level clause two
                <ol>
                    <li>First third-level clause.</li>
                    <li>Second third-level clause.</li>
                </ol>
            </li>
        </ol>
    </li>

    </ol>

    </li><!-- "Main Heading" ends -->    

</ol>
</div>

CSS

div#example{
    width:400px;
}

ol {
    counter-reset: item;
}

li.heading{
    margin-bottom:20px;
}

ol li{
    font-weight:bold;
    text-transform:uppercase;
    list-style-position:outside;
}

ol li:before{    
    content: counters(item,".") ". ";
    counter-increment: item;
    display:marker;
}

ol li ol li{
    font-weight:normal;
    text-transform:none;
}

ol li ol li ol li{
    margin-left:2.5em;
    list-style-type:lower-alpha;
}

ol li ol li ol li:before{
    content:none;
}

ol li ol li ol li ol li{
    list-style-type:lower-roman;   
}

Live-Demo
Siehe die Arbeitsdemo hier.

Hängende Einzüge
Leider erhalten Sie dadurch nicht die gewünschten hängenden Einzüge (bei denen der Text umbrochen und rechts von der Listennummer verschoben wird) für Klauseln der obersten Ebene, aber es funktioniert für die untergeordnete Ebene (roman und alphanumerierte) Klauseln.

Betrachten Sie stattdessen nicht nummerierte Listen
Kurz gesagt, nummerierte verschachtelte Listen sind schwierig mit HTML/CSS zu formatieren, zu schreiben und zu lesen, weshalb Unternehmen wie Amazon und Netflix dies nicht tun Mühe, stören; Sie konvertieren juristische Dokumente in nicht nummerierte Listen, wenn sie im Web angezeigt werden. (Siehe Amazon Datenschutzrichtlinie hier und die Netflix Bedingungen hier )

1
Nick