Re: [css-d] Legal format lists
On Friday, September 24, 2010, 6:12:06 AM, Thierry Koblentz wrote:
The technique used on Wikipedia won't give you the wrapping you want.
What about using two spans and using this approach:
lispan class=num2.1.1.2/spanspan class=textIt shall be construed
a crime against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./span/li
.legal li li {padding-left: 4em;}
.legal li span.num {float: left; margin-right: .3em; }
.legal li span.text {display: block; overflow: hidden; zoom: 1;}
---
Thanks Thierry. I've just tried your suggestion. Unfortunately, in
Firefox 3.6 both the automatic and manual numbering appear and in
Internet Explorer 8 I get the manual numbering stacked above the
paragraph text rather than to its left.
So:
(FF)
1. 1. Blah-de-blah.
(IE)
1.
Blah-de-blah.
Just in case I've misunderstood and for info, I copied your text to
the head of my document (which is HTML 4.01 Transitional),
and increased the spacing between number and text to
1em viz:
style type=text/css
.legal li li {padding-left: 4em;}
.legal li span.num {float: left; margin-right: 1em; }
.legal li span.text {display: block; overflow: hidden; zoom: 1;}
/style
Then in the body of my document:
ol class=legal
lispan class=num1./spanspan class=textbName/bbr
The name of the organisation is .../span/li
!-- etc. etc. --
/ol
Thanks again,
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
Geoff Lane wrote:
On Friday, September 24, 2010, 6:12:06 AM, Thierry Koblentz wrote:
The technique used on Wikipedia won't give you the wrapping you want.
What about using two spans and using this approach:
lispan class=num2.1.1.2/spanspan class=textIt shall be construed
a crime against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./span/li
.legal li li {padding-left: 4em;}
.legal li span.num {float: left; margin-right: .3em; }
.legal li span.text {display: block; overflow: hidden; zoom: 1;}
---
Thanks Thierry. I've just tried your suggestion. Unfortunately, in
Firefox 3.6 both the automatic and manual numbering appear and in
Internet Explorer 8 I get the manual numbering stacked above the
paragraph text rather than to its left.
So:
(FF)
1. 1. Blah-de-blah.
(IE)
1.
Blah-de-blah.
Just in case I've misunderstood and for info, I copied your text to
the head of my document (which is HTML 4.01 Transitional)
Hello Geoff,
Please check this article about doctypes [1].
This doctype,
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
triggers quirks mode [2] in all browsers. IE8 quirks mode is the same
as IE5 quirks mode. One thing which you face straight away is the box
model differences [3]. This would have an impact here.
.legal li li {padding-left: 4em;}
Is the markup ok enough to give this doctype.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
1. http://hsivonen.iki.fi/doctype/
2. http://www.quirksmode.org/css/quirksmode.html
3. http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Thursday, September 23, 2010, 8:10:48 PM, Eric A. Meyer wrote:
In theory you could do it with a combination of ::marker and CSS
counters. In practice, nobody ever implemented ::marker. And I
agree with the assertions made in the link from David H.'s post, that
you want the numbering in the HTML source instead of auto-generated
(at least for legal documents). [...]
---
Thanks for your help, guys. I've cracked the layout provided that (as
David suggested) I hard-code the paragraph numbering. My solution
page paints rather than uses proper semantics, and so goes against
most of what's instinctive to me as a technical writer! The trick
seems to be to use paragraphs rather than proper lists so that the
automatic numbering doesn't appear.
Only two styles are used:
span.num {
float: left;
margin-right: 1em;
}
span.text {
display: block;
overflow: hidden;
zoom: 1;
}
In the body:
pspan class=num1./span
span class=textBlah blah blahbr
span class=num1.1/span
span class=textBlah blah blah/span
span class=num1.2/span
span class=textBlah blah blahbr
span class=num1.2.1/span
span class=textBlah blah blah/span/span
span class=num1.3/span/span/p
pspan class=num2./span
span class=textBlah blah blah/span/p
!-- etc. --
Note the line breaks each time a subordinate list is started and that
each subordinate list is enclosed in the text span of it's parent.
This left-aligns the numbering of sub-paragraphs with the body text of
their parents.
Thanks again,
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Friday, September 24, 2010, 9:52:45 AM, Alan Gresley asked whether the markup was OK for HTML 4.01 Strict. --- Unfortunately not. I have to confess to being a naughty boy and using deprecated attributes in the HTML! One day I'll learn enough about CSS to be able to do away with them, but for now I need to get this one document out by the beginning of next week and so I'll have to leave that for a later date! That said, I appreciate the pointer to some very good reasons to get away from 4.01 Transitional as soon as possible! Many thanks, -- Geoff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Fri, 24 Sep 2010 10:05:40 +0100, Geoff Lane ge...@gjctech.co.uk wrote: On Friday, September 24, 2010, 9:52:45 AM, Alan Gresley asked whether the markup was OK for HTML 4.01 Strict. --- Unfortunately not. I have to confess to being a naughty boy and using deprecated attributes in the HTML! One day I'll learn enough about CSS to be able to do away with them, but for now I need to get this one document out by the beginning of next week and so I'll have to leave that for a later date! That said, I appreciate the pointer to some very good reasons to get away from 4.01 Transitional as soon as possible! Many thanks, Even a fully qualified transitional Doctype should trigger Standards Mode in IE !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; and so give you the benefit of stability (predictability?) on your pages. As you are adding the section numbers manually, Thierry's CSS example should work just as well on a ul where all you need to do is cancel the bullet default with list-style-type: none; I can't say it will improve semantics or give other benefits other than it might make your code easier to prepare and edit thanks to the separation from the li's. Duncan __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Friday, September 24, 2010, 11:15:57 AM, Duncan Hill wrote: Even a fully qualified transitional Doctype should trigger Standards Mode in IE !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; and so give you the benefit of stability (predictability?) on your pages. --- Thanks for that. I had (mistakenly) assumed that it wasn't necessary to refer to the DTD explicitly and that each flavour of HTML was fully defined. BTW, switching my doctype declaration to 4.01 strict and then running the page through W3C's validator jogged my memory as to why I've stayed with the transitional standard: the target attribute of the anchor tag is deprecated and my pages often have 'target=_blank' to open content in a new window without resorting to JavaScript. Thanks again, -- Geoff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
Thanks for that. I had (mistakenly) assumed that it wasn't necessary to refer to the DTD explicitly and that each flavour of HTML was fully defined. BTW, switching my doctype declaration to 4.01 strict and then running the page through W3C's validator jogged my memory as to why I've stayed with the transitional standard: the target attribute of the anchor tag is deprecated and my pages often have 'target=_blank' to open content in a new window without resorting to JavaScript. Try !DOCTYPE html PS: as Duncan suggested you can still use a OL if you simply remove the markers from the list items (I'd missed that in my example). -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On 9/24/10 1:53 AM, Geoff Lane wrote:
On Thursday, September 23, 2010, 8:10:48 PM, Eric A. Meyer wrote:
In theory you could do it with a combination of ::marker and CSS
counters. In practice, nobody ever implemented ::marker. And I
agree with the assertions made in the link from David H.'s post, that
you want the numbering in the HTML source instead of auto-generated
(at least for legal documents). [...]
---
Thanks for your help, guys. I've cracked the layout provided that (as
David suggested) I hard-code the paragraph numbering. My solution
page paints rather than uses proper semantics, and so goes against
most of what's instinctive to me as a technical writer! The trick
seems to be to use paragraphs rather than proper lists so that the
automatic numbering doesn't appear.
Only two styles are used:
span.num {
float: left;
margin-right: 1em;
}
span.text {
display: block;
overflow: hidden;
zoom: 1;
}
In the body:
pspan class=num1./span
span class=textBlah blah blahbr
span class=num1.1/span
span class=textBlah blah blah/span
[...]
That markup may be difficult for a screen reader to digest.
I'd stick with a list if I were you (and clobber the list
markers/numbers with list-style-type: none.)
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Fri, Sep 24, 2010 at 3:36 AM, Geoff Lane ge...@gjctech.co.uk wrote: BTW, switching my doctype declaration to 4.01 strict and then running the page through W3C's validator jogged my memory as to why I've stayed with the transitional standard: the target attribute of the anchor tag is deprecated and my pages often have 'target=_blank' to open content in a new window without resorting to JavaScript. I use this DOCTYPE to allow the target attribute in an otherwise strict document: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; [ !ATTLIST a target CDATA #IMPLIED ] -Mike __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
Multiple replies in one post: On Friday, September 24, 2010, 6:42:54 PM, David Hucklesby wrote: That markup may be difficult for a screen reader to digest. I'd stick with a list if I were you (and clobber the list markers/numbers with list-style-type: none.) Thanks. It's an internal document that I've now published to the group. I may redo it if time permits, but I will remember to use the list-style-type attribute to suppress native numbering for future projects. and at 7:25:04 PM, Michael Geary wrote: I use this DOCTYPE to allow the target attribute in an otherwise strict document: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; [ !ATTLIST a target CDATA #IMPLIED ] I didn't know you could do that with HTML, so that's a bit of an eye-opener for me! Thanks both, -- Geoff __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Legal format lists
Hi All,
Sorry for jumping in without waiting a few days after joining the
list, but I'm going round in circles. Having searched the 'net for a
couple of days I still can't get the format for the constitution of a
local community group right using CSS, so I'm turning to this list in
the hope of some words of wisdom before I give up and resort to PDF!
Any help will be gratefully received.
What I'm trying to do is create nested, ordered lists. This has to be
legal format - that is, the numbering from higher levels is carried
through: e.g.
1
1.1
1.2
1.2.1
1.2.2
1.3
2
2.1
(etc).
I need proper hanging indents (as you'd get with vanilla HTML). That
is, the first word after the para numbering is aligned with the second
and subsequent lines of the paragraph.
The best I've been able to do so far is:
style type=text/css
ol {
list-style-type: decimal;
list-style-position: outside;
counter-reset: item;
}
li {
display:block;
text-indent: -24px;
}
li:before {
content: counters(item, .) ;
counter-increment: item;
}
/style
Unfortunately, this doesn't give proper hanging indents. So I'm
guessing I need some way of setting tab stops and inserting a tab
after each para number; or some way of reinstating the standard LI
behaviour while retaining the legal-style numbering.
Target browsers are any CSS2-compliant, although I suspect the
majority of readers will be using a late version of IE, FF, or Safari.
To complicate things slightly, some of the subordinate levels are
numbered alphabetically rather than numerically, but since I don't
need to carry the parent numbering to those I suspect I can deal with
that by creating another class of OL.
Thanks for looking,
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On 9/23/10 9:11 AM, Geoff Lane wrote: Hi All, Sorry for jumping in without waiting a few days after joining the list, but I'm going round in circles. Having searched the 'net for a couple of days I still can't get the format for the constitution of a local community group right using CSS, so I'm turning to this list in the hope of some words of wisdom before I give up and resort to PDF! Any help will be gratefully received. What I'm trying to do is create nested, ordered lists. This has to be legal format - that is, the numbering from higher levels is carried through: e.g. 1 1.1 1.2 1.2.1 1.2.2 1.3 2 2.1 (etc). [...] You subscribed to the wrong list. :) The WSG has discussed this very issue: http://www.mail-archive.com/w...@webstandardsgroup.org/msg39681.html (If that breaks, try http://goo.gl/zItD ) Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
At 5:11 PM +0100 9/23/10, Geoff Lane wrote:
Unfortunately, this doesn't give proper hanging indents. So I'm
guessing I need some way of setting tab stops and inserting a tab
after each para number; or some way of reinstating the standard LI
behaviour while retaining the legal-style numbering.
In theory you could do it with a combination of ::marker and CSS
counters. In practice, nobody ever implemented ::marker. And I
agree with the assertions made in the link from David H.'s post, that
you want the numbering in the HTML source instead of auto-generated
(at least for legal documents).
Given that, however, you might be able to get away with a markup
structure like this:
lispan class=num2.1.1.2/span It shall be construed a crime
against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./li
...and then float or position the classed 'span' next to the list
item. I'd probably try positioning first, actually. Something along
these lines:
ol.legal li {position: relative; padding-left: 7em;}
ol.legal li span.num {position: absolute; top: 0; left: -7em;}
The numbers there are just wild guesses, so adjust to taste; and I
imagine there would be a bit more needed to fine-tune the placement
and appearance of the numbers. But I think that basic approach
should work for what you're trying to do.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
On Thursday, September 23, 2010, 8:10:48 PM, Eric A. Meyer wrote:
Given that, however, you might be able to get away with a markup
structure like this:
lispan class=num2.1.1.2/span It shall be construed a crime
against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./li
...and then float or position the classed 'span' next to the list
item. I'd probably try positioning first, actually. Something along
these lines:
ol.legal li {position: relative; padding-left: 7em;}
ol.legal li span.num {position: absolute; top: 0; left: -7em;}
The numbers there are just wild guesses, so adjust to taste; and I
imagine there would be a bit more needed to fine-tune the placement
and appearance of the numbers. But I think that basic approach
should work for what you're trying to do.
---
Thanks for that (and to Dave also). FWIW, I tried taking a look at
what Wikipedia have done with the table of contents on
http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style_%28lists%29 as
I assumed the numbering was done using CSS. However, I now see that
they've pretty much done as you suggested. I'll have to roll up my
sleeves tomorrow and get stuck in!
Thanks again,
--
Geoff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Legal format lists
lispan class=num2.1.1.2/span It shall be construed a
crime
against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./li
...and then float or position the classed 'span' next to the list
item. I'd probably try positioning first, actually. Something along
these lines:
ol.legal li {position: relative; padding-left: 7em;}
ol.legal li span.num {position: absolute; top: 0; left: -7em;}
The numbers there are just wild guesses, so adjust to taste; and I
imagine there would be a bit more needed to fine-tune the placement
and appearance of the numbers. But I think that basic approach
should work for what you're trying to do.
---
Thanks for that (and to Dave also). FWIW, I tried taking a look at
what Wikipedia have done with the table of contents on
http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style_%28lists%29 as
I assumed the numbering was done using CSS. However, I now see that
they've pretty much done as you suggested.
The technique used on Wikipedia won't give you the wrapping you want.
What about using two spans and using this approach:
lispan class=num2.1.1.2/spanspan class=textIt shall be construed
a crime against humanity to recover an ancient musical instrument from a
secluded cave and subsequently play it in front of others./span/li
.legal li li {padding-left: 4em;}
.legal li span.num {float: left; margin-right: .3em; }
.legal li span.text {display: block; overflow: hidden; zoom: 1;}
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
