SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Is it OK to have contiguous ordered lists?

    Hi,
    I keep getting contiguous ordered lists to mark-up. Are there accessibilty issues with this? The code I have to use to get this to work is a bit messy (makes me cringe a bit) but sort of has an internal logic.
    I need a solid reason to come back to the authors of the documents if I want them to change the formatting methodology.

    eg. (...but with made up content. I can't give the actual example unfortunately. The actual docs are legal-ish government docs.).

    Heading: What do do in the playground.

    A. Playground fairness
    i Don't push
    ii Don't kick
    iii Don't punch
    B. Share toys
    iv Let other kids:
    - join in
    - have even time
    v Don't hide toys
    C. Language
    vi No swearing
    vii Say nice things to others

    ...you get the idea. The authors are trying to convey that the top level OL is breaking up the list into logical chunks like headings but they want a continutity through all the items listed under the second level OL (in lower-roman). I realise normal practice would be to start each nested list from one but the authors feel that this breaks up the list too much so weakens the message they're trying to give.

    I guess I want to get an idea is this bad practice or just not best practice, or am I over reacting?
    Has anyone else come across this and have a better solution?
    Is there anywhere that explicitly states this is the wrong way to format lists? (I had a look but can't see anything solid)

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi mediachild. Welcome to the forums.

    It would be interesting to see the actual code you are using for that, because I can't quite tell what markup you'd use for that. The mixture of roman numerals and dashes lost me a bit.

    A DL might be a better option, by the sound of it, but I don't see a problem with nesting lists, as a rule.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,
    I've been a long time fan of sitepoint but never explored the forums.
    I had indented the example above but looks like it was eaten by the forum WYSIWYG.

    Here is the markup:

    HTML Code:
    <h3>Heading: What do do in the playground.<br />
    </h3>
    <ol style="list-style-type:upper-alpha">
      <li>Playground fairness
        <ol style="list-style-type:lower-roman">
          <li>Don't push</li>
          <li>Don't kick</li>
          <li>Don't punch</li>
        </ol>
      </li>
      <li>Share toys
        <ol start="4" style="list-style-type:lower-roman">
          <li>Let other kids:
            <ul>
              <li>join in</li>
              <li> have even time</li>
            </ul>
          </li>
          <li>Don't hide toys</li>
        </ol>
      </li>
      <li>Language
        <ol start="6" style="list-style-type:lower-roman">
          <li>No swearing</li>
          <li>Say nice things to others</li>
        </ol>
      </li>
    </ol>
    Last edited by Stevie D; Nov 29, 2012 at 06:24. Reason: HTML tags added

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to the forums, child.


    ...you get the idea. The authors are trying to convey
    Actually, no. It's HARD to tell what the author means ( maybe we are missing indents in your post) , but this could be several lists ( so not really ADJACENT , rather than contiguous) , or it could be a nested list NESTED in which fist level is latin letters uppercase, the next is roman numerals, the next is decimal, etc.

    I mean the list would make more sense IF it were like this:
    A. Playground fairness
    i Don't push
    ii Don't kick
    iii Don't punch
    B. Share toys
    i Let other kids:
    * join in
    * have even time
    ii Don't hide toys
    C. Language
    i No swearing
    ii Say nice things to others

    (At this point it would be just a matter of setting the list styles for each level)
    ol{list-style:upper-alpha}
    ol ol{list-style:lower-roman}
    ol ol ul{list-style:disc}/*there is



    This list is additionally odd in because it doesn't seem to fallow any standard list pattern :/ So the first thing I would do is consider the structure and semantic value of my content.

    I would literally REFUSE to do this, but if someone were to be holding a gun to my betrothed, you could 'manually' achieve this effect by doing something like this:

    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    	.weird, .weird ol, .weird ul{ list-style: none;}
    	 
    	.weird{ counter-reset:root; counter-reset:secLev;  }
     	.weird >li:before , .weird ol>li:before, .weird ul li:before {float:left; text-align:right; width:40px; margin-left:-40px; padding-right:.5em;}
     	.weird ul li:before {content:"-";}
    	.weird >li:before {content:counter(root, upper-alpha)". ";}
    	.weird >li {counter-increment: root; }
     	.weird >li > ol> li:before { counter-increment: secLev; content:counter(secLev, lower-roman);}
    /*optional--- removes indents*/
     	.weird ol,   .weird ul {padding:0; margin:0}
    
    
    		</style>
    	</head>
    	<body>
     <ol class="weird">
    <li>Playground fairness
    	<ol>
    		<li>Don't push</li>
    		<li>Don't kick</li>
    		<li>Don't punch</li>
    	</ol>
    </li>
    <li>Share toys
    	<ol><li>Let other kids:</li>
    		<ul>
    			<li>join in</li>
    			<li>have even time</li>
    		</ul>
    		</li>
    		<li>Don't hide toys</li>
    	</ol>
    </li>
    <li>Language
    	<ol>
    		<li>No swearing</li>
    		<li>Say nice things to others</li>
    	</ol>
    </li>
    
    </ol>
    	</body>
    </html>
    The BIG advantage here is that the values will automatically adjust if you add or remove content.. and of course the nested list is completely semantic and valid.
    Hope that helps.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If the lists you have nested inside the elements of your outer list are required to be numbered continuously ignoring the outer list then you'd need to reset the counter on the first entry in each nested list using counter-reset with a different value for each nested list.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mediachild View Post
    it was eaten by the forum WYSIWYG.
    Yeah, code is better, but if you want to preserve indents etc. you can wrap the content in [code] [/code] tags.

    The markup looks fine to me. Make to to lose the <br> inside the <h3> though, and instead put a bottom margin on the <h3>. Also, rather than inline styles (which are really inefficient), just use one CSS rule for the list-style:

    Code:
    ol ol {list-style-type:lower-roman}

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    How Dresden Phoenix wrote code, is how it tends to be written on the web, because of the mentioned-problem of numbering lists when it's not one big list.

    The way the list was originally presented by mediachild is however what I ran into constantly in insurance and legal forms. The numbering may be significant too, because people will refer to lines and clauses by their number. Legal documents often also need to have two elements marked up with the same number, one with a strike-through, to retain the original wording while correctly numbering the new wording.
    It was also quite frustrating how often other symbols were seemingly randomly sprinkled into the lists, such as * and hyphen-bullets (which I hand-coded into documents, but appeared in IE/Windows as boxes unless the machine happened to have the full Office suite installed which has more fonts), similar to how mediachild posted. Some sub-lists followed the numbering scheme, while others would switch to hyphen bullets. I lost hair over those, and was supposed to be copying PDF images (yeah, someone took a document, scanned it in as an image, and turned that into PDFs, so pdf-to-html would not work anyway) directly to the web.

    If mediachild can use what is suitable for the web (Dresden's version) then that's what needs to be done because legal-style numbering just isn't built into browsers.

    However if the numbering really must reflect more the style we saw in the first post, and especially if there are any strike-throughs, and if this is expected to appear correctly in a broad range of browsers (ie, for the general public, and IE7 or FF3.6 or Safari 4 are being considered) then it's possible the numbers will have to be hard-coded into the list (and the CSS list-style set to none). This kinda sucks because you lose the niceness of auto-generation, but I've done it at times when clauses MUST keep the correct number labelling because of other documents referencing each other.

    Depending on the needed numbering, something clever using the idea felgall mentioned might be usable, but I can't remember off-hand who all supports counter-reset. If this is an intranet, that might not be an issue.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If the exact numbering of the entries is important and needs to be accurately maintained (such as in legal documents) then hard coding the values in the HTML and using an unordered list with the bullets hidden may be the appropriate alternative. You would only generate them in CSS where you want the entries to be automatically renumbered if entries are added or deleted.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Yeah, if the numbering is wonky then you need to use the LI's 'value' attribute. Which sucks because it's not automatic. As far as CSS alone goes, you can add a class for strikethroughs, negating or impeding the increment of the appropriate counter.

    Since , according to the specs, a 0 value is allowed specificity would automatically override the rule when the class is added to the base rule:

    li{counter-increment:root; }
    li.strikeTr{ counter-increment:root 0; }

  10. #10
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the feedback.

    I do feel a bit stuck between a rock and a hard place. I think from the author's perspective they're understandably ungrateful to have a paper they've been working on for months, reviewed, proofed and modified a dozen times... then sent to the web guys to finally put up only to have them come back saying their information structure lacks internal consistency.

    My work around is that I've been resetting the OL list count in a similar way to Stephen's suggestion.

    Really what would help is a luddite guide or accessibility standard I can use as leverage to get the authors to do it right in the first place. Most melt down the moment the words "ordered list" leave my lips.

    If anyone knows of such a list please let me know.

  11. #11
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're curious (and it wasn't clear) I’ll have a stab at where the authors were coming from:

    This is the list of ‘7 rules’ they wanted:

    i Don't push
    ii Don't kick
    iii Don't punch
    iv Let other kids:
    v Don't hide toys
    vi No swearing
    vii Say nice things to others


    Then they realised it was too long and should be broken up into these groups:

    A. Playground fairness
    B. Share toys
    C. Language


    And then they added extra detail to rule 4:

    * join in
    * have even time

    …but at the same time didn’t want to break up numbering of the rules, because then it wouldn’t be perceived as a cohesive list of 7 rules. A bit like not breaking up the 10 commandments.

    The actual content is of course much longer and much more complicated. Added to the mix they mandated that all the paragraphs were numbered too, which is when all my hair fell out.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mediachild View Post
    Then they realised it was too long and should be broken up into these groups:

    A. Playground fairness
    B. Share toys
    C. Language
    Personally, I'd make those headings.

    ... which is when all my hair fell out.
    Don't worry. A bald head is stylish these days.

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Semantically it could be argued that there are 7 rules, that fall into one of 3 categories, and some of those rules have corollaries. So the first level of the list is are categories ( tho Arguably, we could use 3 headings and 3 lists.. but... you can see how that goes back an complicates things a little. then the second level are the actual rules and then finally the third level for the corollaries.

    incidentally, you can number the paragraphs automatically using counters.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •