For a while I’ve been looking for an easy way to check spelling on the websites I design. Unfortunately, the options I found to do this were either not practical or didn’t support the required languages.

However, the following solution comes close to what I was looking for. It allows you to check spelling just like you would in Word for example. It only requires a (modern) browser and temporarily adding an html-attribute.

How to

  1. Add contentEditable="true" to the body tag (to check the entire page) or a specific element (to check only that element and underlying elements) of the page.
  2. View the page in a browser (Firefox or Chrome for example). As you can see, all elements affected by the attribute can de edited. More importantly this also means spelling is checked in a similar way to input fields and text areas.

Caution: Use this only when developing and testing the website. In other words, don’t use this on the website accessible for visitors. For starters it affects the usability of your website.

About the attribute

Adding this attribute to an element makes it editable for users. It’s primarily used as a basis for rich text editors. For more information about the attribute visit w3schools.com.

Languages

This solution uses the dictionaries installed in your browser. You can easily install additional dictionaries and in general browsers support a lot of languages.

Although it’s far from a perfect solution, I thought I’d share it anyway. Especially since it’s so easy to try out and use.