$:.unshift  " / alup / BrainFAQ "

Whitespace highlighting with JQuery   12 Nov 2010

After involving with some javascript projects and playing with jquery for over two years, I decided to create my first jquery plugin. Its main goal was to help Transifex's online editor (called "Lotte") to highlight some of the "hidden" stuff in translation strings. Specifically, the new line characters and the sequences of whitespaces (for example at the beginning or ending of  text) are important characters, which have to be preserved in the translation process. A non-experienced translator may probably skip these characters if they are not highlighted. So, as far as the technical part is concerned, there is a jquery function called 'whitespaceHighlight()'. In order to run it, just select the DOM elements which will be "whitespace-highlighted" and issue:

1 $('div').whitespaceHighlight();

1. First, download the plugin or clone the git repository ( git clone git://github.com/alup/jquery-whitespaceHighlight.git).
2. Unzip the file (if you have downloaded the tarball/zip).
3. Put a link to the .css file, in the pages where you want to use the effect:

    <link media="screen" href="css/jquery.whitespaceHighlight.css" type="text/css" rel="stylesheet" />;
  

4. Link to the .js file in your html pages:

  <script type="text/javascript" src="js/jquery.whitespaceHighlight.js"></script>
  

5. That's all! Have fun now.