f



Counters, if you're interested

Just put together a simple page in which I used CSS "counters" for the 
first time to produce a numbered list without using <OL>.  Why bother?  
To achieve a nested numbering, 1,  1.1,  1.1.1,  (etc).  I've used the 
Counters() function (nb plural) for simplicity and conciseness.  
Ideally, I've have liked to differentiate the numbering style of sub-
lists, so that the parent list was A, B, C, and sublists were A.a, A.b, 
A.c (lower case).  That is possible if you "manually" define a different 
counter for every anticipated level, but the counters() function works 
for an arbitrary depth of nesting, at the cost of that flexibility.

CSS experts will sigh and scroll on, but for anyone still, like me, at 
the "intermediate" stage who hasn't tried this, see the CSS at lines 11-
27 in this:
http://bit.ly/lladmin

Simple description:  http://www.w3schools.com/css/css_counters.asp

What's my dotty page about?  For those who also use Facebook, you may 
have experienced useful "groups" which are administered by tyrants.  I 
created "Leytonstone Life" (Leytonstone is an agreeable district in East 
London) after pondering the nature of Democracy and rule-of-law.  Sure, 
it's way over the top in hindsight, but it works...


-- 

Phil, London
0
Philip
8/21/2016 7:21:42 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

8 Replies
183 Views

Similar Articles

[PageSpeed] 40

On 21/08/2016 22:21, Philip Herlihy wrote:
> http://bit.ly/lladmin
....
> What's my dotty page about?  For those who also use Facebook, you may
> have experienced useful "groups" which are administered by tyrants.  I
> created "Leytonstone Life" (Leytonstone is an agreeable district in East
> London) after pondering the nature of Democracy and rule-of-law.  Sure,
> it's way over the top in hindsight, but it works...

For the sake of readability, I propose something like:

max-width:35em;
margin-left:auto;
margin-right:auto;

to the body and changing:

div>ul>li

to

div>ul li

-- 
Best wishes, Osmo
0
Osmo
8/22/2016 2:50:14 PM
In article <npf3fi$t6e$1@dont-email.me>, osmo@weppipakki.com says...
> 
> On 21/08/2016 22:21, Philip Herlihy wrote:
> > http://bit.ly/lladmin
> ...

> 
> For the sake of readability, I propose something like:
> 
> max-width:35em;
> margin-left:auto;
> margin-right:auto;
> 
> to the body and changing:
> 
> div>ul>li
> 
> to
> 
> div>ul li

Thanks for this.  I hadn't really put much effort into making it 
agreeable to read - I've recognised that I tend to have a blind spot 
about text (less glamorous, if more vital, than rounded corners, 
shadows, etc!).  I've played with the settings you suggest, and I find 
I'm happier with 45em (though I'll keep that issue under review).

The selector:
div>ul>li
.... was deliberate - I wanted a margin-top only for the first level of 
list items, with any lower levels packed together.  But I've taken the 
offered invitation to reconsider, and I've ended up with this:

div>ul li {margin-top: 0.33em;}
div>ul>li {margin-top: 0.66em;}
.... which (you're right) is a bit less indigestible.  Of course, now 
that I've been prompted to look at this aspect, I may well find my taste 
evolves.

Much appreciated.

-- 

Phil, London
0
Philip
8/22/2016 5:15:18 PM
In article <MPG.32254371afb7637989737@news.eternal-september.org>,
 Philip Herlihy <thiswillbounceback@you.com> wrote:

> In article <npf3fi$t6e$1@dont-email.me>, osmo@weppipakki.com says...
> > 
> > On 21/08/2016 22:21, Philip Herlihy wrote:
> > > http://bit.ly/lladmin
> > ...
> 
> > 
> > For the sake of readability, I propose something like:
> > 
> > max-width:35em;
> > margin-left:auto;
> > margin-right:auto;
> > 
....
> 
> ...I've played with the settings you suggest, and I find 
> I'm happier with 45em (though I'll keep that issue under review).
> 

OK, but for some people who require bigger text than you probably 
need, 45em can often get to require horizontal scrolling of the 
viewport (a bad thing). Osmo's figure would make life easier for them. 
But, not just this, 35em or even a bit less makes it easier to read 
for most people and that is different to the way it looks as a whole.

-- 
dorayme
0
dorayme
8/22/2016 9:34:34 PM
On Sunday, August 21, 2016 at 10:21:42 PM UTC+3, Philip Herlihy wrote:
> Just put together a simple page in which I used CSS "counters" for the 
> first time to produce a numbered list without using <OL>.  Why bother?  
> To achieve a nested numbering, 1,  1.1,  1.1.1,  (etc).  I've used the 
> Counters() function (nb plural) for simplicity and conciseness.  
> Ideally, I've have liked to differentiate the numbering style of sub-
> lists, so that the parent list was A, B, C, and sublists were A.a, A.b, 
> A.c (lower case).  That is possible if you "manually" define a different 
> counter for every anticipated level, but the counters() function works 
> for an arbitrary depth of nesting, at the cost of that flexibility.
> 
> CSS experts will sigh and scroll on, but for anyone still, like me, at 
> the "intermediate" stage who hasn't tried this, see the CSS at lines 11-
> 27 in this:
> http://bit.ly/lladmin
> 
> Simple description:  http://www.w3schools.com/css/css_counters.asp
> 
> What's my dotty page about?  For those who also use Facebook, you may 
> have experienced useful "groups" which are administered by tyrants.  I 
> created "Leytonstone Life" (Leytonstone is an agreeable district in East 
> London) after pondering the nature of Democracy and rule-of-law.  Sure, 
> it's way over the top in hindsight, but it works...
> 
> 
> -- 
> 
> Phil, London

Thanks Phil, I haven't heard of those CSS counters before. There are always surprises with CSS :)

Ram
0
Ram
8/23/2016 6:05:17 AM
On 23/08/2016 00:34, dorayme wrote:
> OK, but for some people who require bigger text than you probably
> need, 45em can often get to require horizontal scrolling of the
> viewport (a bad thing).

Horizontal scrolling should not be a major problem for the English 
language (mainly short words), as my proposal was based on 'max-width' 
(instead of 'width'). Well, at least if one avoids words like 
pneumonoultramicroscopicsilicovolcanoconiosis.

> But, not just this, 35em or even a bit less makes it easier to read
> for most people and that is different to the way it looks as a whole.

Certainly easier than 45em. And let us not forget what Mr. Korpela wrote 
just a few weeks ago:

>> ...these days I generally recommend something like
>>
>> p {
>>   max-width: 25em;
>>   max-width: 60ch;
>> }

And:

>> For optimal readability, the width should be considerably smaller,
>>  but there are other factors to consider.

-- 
Best wishes, Osmo
0
Osmo
8/23/2016 6:08:47 AM
In article <npgp9s$3u1$1@dont-email.me>,
 Osmo Saarikumpu <osmo@weppipakki.com> wrote:

> On 23/08/2016 00:34, dorayme wrote:
> > OK, but for some people who require bigger text than you probably
> > need, 45em can often get to require horizontal scrolling of the
> > viewport (a bad thing).
> 
> Horizontal scrolling should not be a major problem for the English 
> language (mainly short words),

You are right, not a problem for 'max-width. The problem emerges for 
'width'(and apart from anything to do with long words).

-- 
dorayme
0
dorayme
8/23/2016 6:21:11 AM
On 22/08/2016 20:15, Philip Herlihy wrote:
> Thanks for this.  I hadn't really put much effort into making it
> agreeable to read - I've recognised that I tend to have a blind spot
> about text (less glamorous, if more vital, than rounded corners,
> shadows, etc!).

My pleasure. Admittedly, it's very easy to get sidetracked with Web 
technologies; there is always something new, cool and sexy to discover 
just around the corner.

> I've played with the settings you suggest, and I find
> I'm happier with 45em (though I'll keep that issue under review).
>
> The selector:
> div>ul>li
> ... was deliberate - I wanted a margin-top only for the first level of
> list items, with any lower levels packed together.

That's how I found them: packed together ;) I guessed that your purpose 
was to convey structure visually? If so, them counters were doing that 
already :)

Basically my two quick suggestions were based on two simple factors I 
often find lacking (when a bit more obvious issues are in order): line 
width and line height. I tend to need less of the former and more of the 
latter. Perhaps you might be interested in the following, slightly 
controversial, article: Secret Symphony: The Ultimate Guide to Readable 
Web Typography at:

https://pearsonified.com/2011/12/golden-ratio-typography.php

Including the critical comments.

Here is a differing opinion concerning line height:

http://kingdesk.com/articles/optimal-line-height/

But if we increase the line height of the article to, say 1.5 or 1.6, 
who finds it equally or less readable?

> Much appreciated.

You're most welcome! But please indulge me: what is the reason for 
setting font size to 14px? Now I have hit three times Ctrl+ instead of 
just two times :)

-- 
Best wishes, Osmo
0
Osmo
8/23/2016 10:36:23 AM
In article <nph90q$gra$1@dont-email.me>, osmo@weppipakki.com says...
> 
> On 22/08/2016 20:15, Philip Herlihy wrote:
> > Thanks for this.  I hadn't really put much effort into making it
> > agreeable to read - I've recognised that I tend to have a blind spot
> > about text (less glamorous, if more vital, than rounded corners,
> > shadows, etc!).
> 
> My pleasure. Admittedly, it's very easy to get sidetracked with Web 
> technologies; there is always something new, cool and sexy to discover 
> just around the corner.
> 
> > I've played with the settings you suggest, and I find
> > I'm happier with 45em (though I'll keep that issue under review).
> >
> > The selector:
> > div>ul>li
> > ... was deliberate - I wanted a margin-top only for the first level of
> > list items, with any lower levels packed together.
> 
> That's how I found them: packed together ;) I guessed that your purpose 
> was to convey structure visually? If so, them counters were doing that 
> already :)
> 
> Basically my two quick suggestions were based on two simple factors I 
> often find lacking (when a bit more obvious issues are in order): line 
> width and line height. I tend to need less of the former and more of the 
> latter. Perhaps you might be interested in the following, slightly 
> controversial, article: Secret Symphony: The Ultimate Guide to Readable 
> Web Typography at:
> 
> https://pearsonified.com/2011/12/golden-ratio-typography.php
> 
> Including the critical comments.
> 
> Here is a differing opinion concerning line height:
> 
> http://kingdesk.com/articles/optimal-line-height/
> 
> But if we increase the line height of the article to, say 1.5 or 1.6, 
> who finds it equally or less readable?
> 
> > Much appreciated.
> 
> You're most welcome! But please indulge me: what is the reason for 
> setting font size to 14px? Now I have hit three times Ctrl+ instead of 
> just two times :)

Hmm..  Interesting stuff - perhaps some of it a little above my head in 
terms of what I currently recognise as the most important aspects of a 
page.  I do note with interest the need for a clear "target" when 
sweeping the eyes back to the beginning of a next line, and line-height 
and line-length are both relevant to this. Certainly, I've given all of 
this too little thought.

And of course I'm picking values (e.g. 14px and 45em) which look right 
to me.  However, taste (or recognition, perhaps) improves as you think 
about things.

One thing I'd add - readability isn't the only aspect to consider.  The 
overall shape of a page matters too (and may even influence whether the 
reader goes as far as trying the read the text).  For viewport widths 
where the max-width property comes into play the "nature" of the content 
can seem subtly different depending on the width of text lines.  At 
first glance, it's helpful if you can get some impression of what's 
there to be read, and the shape of text blocks may even make the 
difference between whether a visitor starts to read or shrugs and clicks 
away - and this can be a split-second thing.  At 45em and 14px (on my 
screens at least) the text looked better organised and (to me) more 
digestible.  16px simply looked too big, and made the "shape" of the 
text harder to discern.  We all see things differently, of course (I'm 
surprised you'd want 3 x Ctrl+ from a starting point of 14px.)

Nevertheless, what you've said will stay with me, and I'll be playing 
with it!

-- 

Phil, London
0
Philip
8/24/2016 12:55:40 PM
Reply: