Automatic margins for images added with a WYSIWYG editor

WYSIWYG editors are great tools to make content formatting accessible for our clients. Unfortunately a lot of our clients are don't have enough computer / internet experience to deal with some of the limitations or difficulties that come with using a WYSIWYG-editor. Therefor, we are always looking for better ways for making working with WYSIWYG editors easier for our clients.

One of our basic obstacles has always been providing floated images with a nice margin. Images floated left with a margin on the bottom and right, images floated on the right with a margin on the bottom and left. Out-of-the-box, all WYSIWYG editor we have used come with buttons to float an image or other piece of content to the left or right. But because these buttons only add style="float:left" or style="float:right" to the element, we used to make custom formats for floating images that also added margins to the images. In order to float the images the right way, clients had to select an image - and had to select the custom style. They always did it right a few times, but after time they forgot and used the aligment buttons in the WYSIWYG editor again.

Today I was browsing around the web looking which browsers supported the css outline property, and accidentally came across the attr selector. I knew of the existence of this selector, but this day I realised what noble cause it could serve. What if we could check if an image is floated to the left or right and if so, add a margin to it?

What we do here is we check the style attribute of the images inside every p element and we check if the string float: right; is found using the * sign before the = (more information about attribute selectors can be found on css3.info). Not that i'm searching for float: right; and not float:right; (note the space). If you are implementing this yourself, check what your WYSIWYG inserts and use the correct one. Anyway, see the following example:

Using the following HTML (directly generated from the WYSIWYG editor):

As you can see, this is a super easy way to provide images you add via your WYSIWYG editor with the right margins. This works in IE7, IE8, Firefox, webkit browers and probably Opera.