Paragraphs in List Items
By Deane Barker | April 27, 2007 | 7 Comments
Here’s something that WYSIWYG editors don’t do well: paragraphs within list items. Like this (ironically, Markdown does it just fine):
This is a paragraph
This is another one.
This is another list item.
The problem is that one you’re in a list item and you press Enter, you get a new list item, not a new paragraph. I never been able to figure out how to do this in any WYSIWYG editor, Word included. This is the HTML I’m trying to get to:
Para 1
Para 2
Some would say, just enter two line breaks, like this;
Para 1
Para 2
But this is wrong on both a “clean code” level, and for the fact that Para 1’s block formatting is tied in with Para 2. This is the entire reason we have the P tag, really — to separate them into two blocks.
Some folks over at Simple Bits talked about it three years ago and came to the conclusion that this is the “correct” HTML for this, but I can’t find any editor support for it.
Anyone know of an editor that supports this?
Comments
-
In word, it can be achieved with SHIFT-ENTER instead of just ENTER – the same may be true of other editors.
-
In word, it can be achieved with SHIFT-ENTER instead of just ENTER
No, that gives you a line break, not a paragraph break. Shift-Enter is fairly global across WYSIWYG for a line break.
-
Interesting… I didn’t even realize you could put
tags in
- .
- tags inside
tags?
-
Ooops, sorry, my previous comment seems messed up.
I was asking if you know if you can put a < li > tag inside a < p > tag.
-
Hi Deane,
I pasted your text into our editor and this is the code that it came back with. Seems to work ok. Try it out for yourself at http://www.ephox.com/products/productivity/demo/start.html and let us know what you think.
<ul> <li> <p>This is a paragraph</p> <p>This is another one.</p> </li> <li> <p>This is another list item.</p> </li> </ul>
-
I agree that it would probably work fine if you pasted in the HTML. But how can an author do this from a WYSIWYG perspective?
-
Hi Deane,
I’m the product manager for EditLive!, a WYSIWYG editor and this is a tough one. In fact, it’s invariably tough to provide any of this kind of transparent functionality (transparent because it’s bound to keys that users press during the normal flow of typing).
The reason being that the Enter key and even Shift+Enter can only ever have a limited number of things it can do, and those things need to be relatively consistent throughout the editor. Also, most people that use WYSIWYG editors, for better or for worse, don’t understand how the blocked rendering model of HTML+CSS works. In fact, EditLive! used to insert paragraph tags into lists by default and we had to change the behaviour when users complained that this behaviour left their lists looking very spaced out because of the upper and lower margins on p tags. I’d also argue that this was a change for the better anyway as, in most cases, it gives neater markup.
However, I do have some good news for you. This is possible in EditLive!, it’s just perhaps not as intuitive as you might like. Check out the demo at http://www.ephox.com/products/editlive/demo/start.html. To get a p tag within a list select the text in one of the list items and then go to the styles drop down and apply the “Normal” style. This will wrap the text of the list item in a paragraph tag.
Let me know if you’ve got any more questions about WYSIWYG editors from Word through to the free JavaScript based ones. I’m always happy to help and I (sadly) have spent the last 6 years of my working life looking at them in more detail than a completely sane person should ;-). You can find my contact details on my blog (listed as my URL for this comment).
Do you know if you can put