attribute or CSS property?

Hey,
one issue that hasn't been talked about is the question of whether
contenteditable is best handled as an attribute or a css property (or
both).  -webkit-user-modify: read-write-plaintext-only; seems to do some of
what we want contenteditable=typing to do already in terms of not handling
things.


However, the main reason I am thinking about this is editable and
noneditable parts potentially being mixed. If we take a random editor, it
will usually have one DOM node in which all the editors content is stored,
such as:

<div contenteditable=typing>....Blablabla....</div>

For saving it then simply takes the contents of that node and sends it to
the server which will save it to the database from where it then can be
served as part of another webpage. That's easy enough.

But what if one works with an editor that is dealing with more complex
elements which may be partially editable?

For example citations one does not want to be editable:

<div contenteditable=typing>
The sun is larger than the moon.<span class="citation"
contenteditable=false>(Galileo 1635:35)</span>
</div>

One can still save the contents of the editor Dom node and display it
directly, although someone may come across the contenteditable=false
attribute if trying to copy the text and pasting it into his own editor.

But what if one wants to have an image with an editable caption?

<div contenteditable=typing>
<p>Text...</p>
<figure contenteditable=false>
<img src="...">
<figcaption contenteditable=typing>An important picture</figcaption>
</figure>
<p>Text...</p>
</div>


If one simply saves the contents of the DOM-node and displays it in a
webpage, the captions of the pictures will suddenly appear as if they are
editable. If course it's not *that* difficult to go through all the nodes
before and add contenteditable=false on those that need it and do the same
again removing the attributes before saving. But it would seem cleaner if
one simply could use CSS instead:

<style>
#editor, figcaption {
  content-editable: typing;
}
figure, .citation {
  content-editable: false;
}
</style>
<div id="editor">
  <p>Text...</p>
  <figure>
    <img src="...">
    <figcaption>An important picture</figcaption>
  </figure>
  <p>Text...</p>
</div>



-- 
Johannes Wilm
Fidus Writer
http://www.fiduswriter.org