SubscribeMaking EditLive! Content Behave More Like Word
This month I travelled around Australia and met with several long term Ephox clients and talked with them about their experiences with EditLive!, what they’d like to see in the product and what’s coming in EditLive!.
Their feedback was very valuable and it’s safe to say that the trip is likely to be the first of many very client focused trips. In fact, if you’d like to share your own EditLive! experiences, please get in touch with us via the LiveWorks! mailing list, we’d love to hear from you.
One of the things that came up a few times was some inconsistencies between HTML and Word rendering that can cause confusion when users are importing content from Word. There are two simple things you can do to your web site’s CSS to help users out with this.
Firstly, default top and bottom margins. Users experiencing this issue often complain that, when content is pasted from Word into EditLive! there’s “double spacing” between paragraphs. This happens because the top and bottom margins on paragraphs in Word are set to 0, but in HTML it tends to be around 6 pixels or so. The simple solution here is to override the HTML defaults in your CSS by adding something like this:
p{
margin-top:0px;
margin-bottom:0px;
}
It’s worth noting that you could also fix this issue by changing the top and bottom margins in your word processor’s default document template (normal.dot in Word) to match HTML, but it’s much easier to change this in your style sheet because it’s settings are centrally administered.
The second thing that often confuses people more used to creating content on their desktop rather than online is the nature of HTML tables. This is because tables in desktop word processors have a single border, whereas HTML tables, by default actually have two borders. You usually can’t see this because there’s no cell spacing specified. However, if you look at the table below where I’ve set the cell spacing attribute to 2 you can clearly see the borders.
This is because each cell border is made up of two border lines - the border of the cell and the border of either the table or the neighbouring cell.
Fortunately CSS comes to the rescue again. In order to make HTML tables behave just like tables in desktop word processors all you need to do is collapse the table borders. This can be done by adding the following code to your site’s CSS:
table{
border-collapse:collapse;
}
Which will make your table look more like this (note I’ve not changed the cell spacing here, just applied border-collapse):
And that’s it. These two simple CSS changes can make a world of difference for your EditLive! users, especially when they’re importing content from desktop word processors. Just a couple of final things to remember before you start applying this CSS everywhere:
- Remember if you’ve got a CMS often the published CSS is different to the authoring CSS that EditLive! uses. Make sure you make the required changes to both sets of styles.
- You’ll want to test this CSS in a development/testing environment first to make sure it doesn’t have an unexpected impact on your web site’s layout.
- If you’ve already got CSS specified for the “p” tag and/or the “table” tag just add these properties to what you already have.
- If you add this CSS to the root element style (i.e. not a class style) like I have above, it should inherit across all the other classes you have in your CSS for tables and paragraphs.
Hopefully you’ll find this very useful and if you’ve got any questions just get in contact with us via the LiveWorks! mailing list.