W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: Consider adding content(html) to display html source

From: Charles Pritchard <chuck@jumis.com>
Date: Tue, 28 Feb 2012 11:48:34 -0800
Message-ID: <4F4D2F92.4020502@jumis.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: WWW Style <www-style@w3.org>
On 2/27/2012 4:24 PM, Tab Atkins Jr. wrote:
> On Sun, Feb 19, 2012 at 9:03 PM, Charles Pritchard<chuck@jumis.com>  wrote:
>> >  A CSS generated and replaced content semantic, something like content(html)
>> >  could be helpful with the<code>  tag as well as @contentEditable.
>> >  The idea is for innerHTML to be made visible to the user.
>> >
>> >  Examples:
>> >  <code><p>I am abusing the code tag</p></code>
>> >  <div contentEditable><em>I know basic html</em></div>
>> >
>> >  Something in CSS would it easier to flip on and off HTML source code
>> >  examples.
>> >
>> >  Something more heavy could display syntax highlighting, if it's not being
>> >  set to a string.
>> >  code { content: html(); }
> I'm with Daniel.  This is a semantic abuse.  Your document contains
> HTML code, but you're trying to display it as text.
>
> This is fundamentally limited in the case of HTML, since you're
> triggering HTML parsing and there are limitations on what you can
> nest.

Yes, it's absolutely limited. However, it does lead to better code 
examples, since the snippets need to be well-formed.
I'm doing this in JS anyway, but I thought there might be room or means 
to handle it in CSS as well.

The purpose is to pull a text string.

I'm not trying to stop or alter the parsing of HTML. I'm trying to 
display the source of HTML valid, existing and displayed on the current 
page, always from <code>.

Here's another example of the JS code I'm using (snipped out):
     var a = document.getElementsByTagName('code');
     for(var i = 0, x = a.length; i < x; i++) {
         a[i].className = 'show';
         var txt = document.createTextNode(a[i].innerHTML);
         (document.createElement('div')).appendChild(txt);
         txt.parentNode.style.color = 'forestgreen';
         a[i].appendChild(txt.parentNode);
     }

This works just fine for writing code once, with <code>, and both 
displaying the results of that code as well as the source code to the 
user, as part of documentation.

I don't see this content(html) proposal moving forward, but I do want to 
make sure we're all talking about the use cases I brought up, and not 
something else (like HTML parsing semantics).

-Charles
Received on Tuesday, 28 February 2012 19:48:56 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:51 GMT