Critical alignments in HTML for Prose like alignments
When typeset contents such as prose, programming code, etc., using typesetting softwares such as InDesign, Quark, etc., non-breaking or TAB space used to aling content which requies to align horizontally. Unfortunately, TAB feature is not supported in HTML. So, most of the cases non-breaking space is used. But every font has its own width for non-breaking character. The font used in the typsetting application vary when published in HTML online. Though, the non-breaking spaces are preserved in XML/HTML, when online used different font, then the alignment does not match with the typeset PDF pages.
When we use monospaced fonts (eg. Courier) in both typesetting and HTML online, of course both PDF and HTML will match exactly when we preserve non-breaking or space character. But, most of the cases monospaced fonts used in programming codes but not for other environments.
This 1KB JavaScript used jquery, and align you contents respective to any characters.
Demo demo JSFiddle full page mode.
Demo JSFiddle code page mode.
Import jquery script from any available CDN. In my example, I use Google CDN, as I like Google.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="jquery.align.js"></script>
As HTML5 offers user defined attributes for elements in prefix with data-foo, I use data-grid in my example. Of course, you can use any attributes like data-*. For those to be aligned horizontally, insert <span data-grid='a'>. In result, wherever data-grid='a' used will align horizontally. Please make sure that the attribut value vary for each horizontal alignments. Please refer the index.html document.
jquery used as dependancy.
As this uses Jquery, using this for ePub may be heavier. Plain JavaScript to be written for ePub implementation.