Re: [css3-lists][css3-content] Proposal for styles inheritance on list markers (actually on :marker, :before and :after pseudo-elements)

> > # Problem
> >  
> > List item markers (and eventually pseudo-elements created by :before and
> > :after) don't inherit styles present in the list item contents.
>  
>  
> No, because they're siblings of the contents. They *do* inherit the
> styles specified *on the <li> itself*, since the <li> is the marker's
> parent.

Yes, I totally understand that this is the *current* way of technically seeing this. Still, in the UX point of view the problem persists. In poor words, the user wants to have their markers matching the styles of the list item contents. Didn't mean to pose a current CSS problem but a real world user problem.


> > # Examples
> >  
> > In short, the marker in the following item should be both bold and italics:
> > <li><b><i>Item text</i></b></li>
>  
>  
> Rather than using styling elements, use CSS itself.
I'm afraid that this is an oversimplified way to see and solve the problem. Note that users creating content out there don't have access to CSS editing.


Imagine that the user is producing this content currently (in an editor, selecting text and applying "bold"):

<li><strong>Text</strong></li>

Then we say that a way to "solve" the problem is, if the user selects the whole list item and apply bold, we could produce this instead:

<li style="font-weight:bold">Text</li>

Rendering problem solved! Well… no:

- Who said that <strong> should render as "font-weight:bold"? This can be modified and even suppressed on different devices.

- We loose the whole semantic value added by <strong>, producing bad quality HTML.

This is a rendering issue purely and the only one able to understand how to style the marker ultimately is the browser itself, at rendering runtime.  

Consider also that I made the example simple for simplification, but in cases like the following, it would be simply impossible to transport the styles to the list item marker:

<li><h1>Title</h1></li>
<li><span class="my-class">Text</span></li>

> Given that the user's intentions are indeed hard to divine, I'm not
> sure why it would be a good idea to unilaterally change the behavior
> of inheritance.
>  
> If the behavior change is gated by a property as you suggest, then it
> requires an explicit user-indication to occur. When that happens,
> editors like CKEditor can simply move the styles around themselves.
> This certainly isn't trivial, but it's definitely possible, and
> doesn't require any new additions to the language, or layering
> violations like having a property affect the way the cascade works.


Moving the styles is inaccurate and even impossible is most of the cases, as described earlier.

From our experience we actually have the opinion that the proposed behaviour should be just the default. People really expect this to happen.  

But, to not break the web, we thought that a CSS way to enable this would be more appropriate. We don't think about having users explicitly defining when to enable this, but instead site administrators enabling it site wide with something like this:

/* This is not in any way a proposal, just an example */
li::marker {
all: inherit-parent-content;
}


We're bringing to the table something that, based on our observations, represents a recurring and consistent problem. We also understood that it is impossible to solve this with the current available technology. Therefore the only option we have is exposing the issue to the W3C appreciation.

Please let's keep the discussion moving.

Thanks for your feedback, TJ.

Fred



On Monday, December 16, 2013 at 7:29 PM, Tab Atkins Jr. wrote:

> On Mon, Dec 16, 2013 at 8:44 AM, Frederico Knabben
> <f.knabben@cksource.com (mailto:f.knabben@cksource.com)> wrote:
> > This message follows a proposal to the HTML WG:
> > https://www.w3.org/Bugs/Public/show_bug.cgi?id=24111
> >  
> > # Problem
> >  
> > List item markers (and eventually pseudo-elements created by :before and
> > :after) don't inherit styles present in the list item contents.
> >  
>  
>  
> No, because they're siblings of the contents. They *do* inherit the
> styles specified *on the <li> itself*, since the <li> is the marker's
> parent.
>  
> > # Examples
> >  
> > In short, the marker in the following item should be both bold and italics:
> > <li><b><i>Item text</i></b></li>
> >  
>  
>  
> Rather than using styling elements, use CSS itself.
>  
> > # Reasoning / Background / tl;dr
> >  
> > This proposal is a follow-up for the following CKEditor issue:
> > http://dev.ckeditor.com/ticket/8741
> >  
> > While HTML and CSS provide some control for web developers to style lists
> > and their numbers/bullets, more and more HTML content (actually the great
> > majority of it) is produced by non-technical people, using web-based tools
> > like CKEditor.
> >  
>  
>  
> Given that the user's intentions are indeed hard to divine, I'm not
> sure why it would be a good idea to unilaterally change the behavior
> of inheritance.
>  
> If the behavior change is gated by a property as you suggest, then it
> requires an explicit user-indication to occur. When that happens,
> editors like CKEditor can simply move the styles around themselves.
> This certainly isn't trivial, but it's definitely possible, and
> doesn't require any new additions to the language, or layering
> violations like having a property affect the way the cascade works.
>  
> ~TJ