World of Codecraft

Jul 04 2007

Proposed behavior for nested divs and spans.

Posted by: codecraft in coding

I’d like to propose the following behavior for how kupu deals with changes in styles for nested divs and spans. I’m asking for feedback and a go-ahead to start working on the code for this.

Right now, HTML like the following example
(*) <div><div><p>Hello world</p></div></div>
acts strangely in kupu. In Firefox, for example, the style of “Hello world” shows as “div” in the style pulldown menu; changing the style to <h1> gets rid of one level of nesting and changes the inner paragraph tag to <h1>: <div><h1>Hello world</h1></div>.

To me it seems like the standard behavior should instead be: “Changing the paragraph/block style of text, will eliminate all nested block styles for that text, and then set the block style.” So for instance, in (*), the block style for “Hello world” would appear as “Other: Nested styles.” Then, changing the block style for “Hello world” to <h1> would remove it from the <div><div><p> nesting, and then set the style to <h1>.

A second example:
<div>
<div class=”decoy”>
<p>Hello</p>
<p>nested</p>
<p>world</p>
</div>
</div>

Changing the style of “nested” to “h1″ would remove the nested tags around it, but not around “Hello” and “world”, resulting in:
<div>
<div class=”decoy”>
<p>Hello</p>
</div>
</div>
<h1>nested</h1>
<div>
<div class=”decoy”>
<p>world</p>
</div>
</div>

This change makes sense because the styles an administrator defines for kupu’s WYSIWYG, can all be used in top-level block tags without any nested divs. Rather than choosing which level of nesting is being modified, which levels of nesting are kept, etc., which is too confusing to implement well, it makes sense to set the standard behavior to a simple “Set the new style on a single, top-level block with no nesting.”

A similar principle would guide setting character styles with <span> tags (and I think this already happens this way). Below, the character style for “Crackle!” would appear as “Other: nested”.
<p>
<span class=”food”>
<span class=”cereal”>
<span class=”medium”>Snap!</span>
<span class=”soft”>Crackle!</span>
<span class=”loud”>Pop!</span>
</span>
</span>
<p>
Then, changing hte character style for “Crackle!” would remove all nested character styles around it and set a single-level style:
<p>
<span class=”food”>
<span class=”cereal”>
<span class=”medium”>Snap!</span>
</span>
</span>
<span class=”softer”>Crackle!</span>
<span class=”food”>
<span class=”cereal”>
<span class=”loud”>Pop!</span>
</span>
</span>
</p>

In the future maybe it’s possible to allow nesting through the WYSIWYG, but I think any changes of this sort would build on or override this default beahvior.

This entry was posted on Wednesday, July 4th, 2007 at 8:21 pm and is filed under coding.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

350 Responses to “Proposed behavior for nested divs and spans.”

Designed for coding

Proposed behavior for nested divs and spans.