During the development of a website layout or template, it’s easy to overlook small typos in texts or labels. Spellchecking does not work on standard HTML elements by default, which makes it challenging to identify errors quickly. However, with a simple script, you can activate spellchecking directly in the browser to scan the entire page for errors.
This approach is especially useful for designers, developers, and testers who want to review interface texts or validate final drafts of a webpage before launch.
To enable this functionality, open the developer console in any modern browser and run the following code:
const styleSheet = document.styleSheets[ 0 ]; styleSheet.insertRule( '::spelling-error{background:red;color:white}', styleSheet.cssRules.length ); document.body.setAttribute( 'contenteditable', 'true' ); document.body.setAttribute( 'spellcheck', 'true' );
After running the code, wait a few seconds and click on an empty area of the page to activate the spellcheck. Misspelled words will be highlighted with a red background, making them easy to spot and correct.
Compatibility and Notes
- This script works in most modern browsers like Chrome, Firefox, and Edge.
- It does not alter the content of your website and operates only in the browser session, ensuring safety.
- Some CSS styles or scripts on your page might interfere with this functionality, so results may vary slightly.
Conclusion
This method provides a quick and visual way to check for typos on any webpage. While it won’t replace a full-scale spellchecker, it’s an excellent supplementary tool for catching errors during the development or testing phases.