Writting documents with jQuery

Nicholas Christopoulos
Athens, 1 Jan 2015


This is an abstract class div. Here must be the a small paragraph which explain the purpose of this article. Well, this article is just a demo of the style sheet and the jquery script of this page. This page is an example of how we can produce nice papers in HTML with jQuery.



v2.1 2015-01-24
* hyphenation activated.
* body margins only for screen.
* abstract margins reduced if no screen.

v2.0 2015-01-23
* added modules structure, toc.
* added modules maketitle, abstruct.

v1.0 2014-12-22
* module footnotes.
* module bibliography, citing.


The HTML is the standard markup language for creating web pages. This page has utilities in jquery to help you write LaTeX quality documents in HTML. If you are new to HTML, there is a very good and short Markup Guide to HTML by Dave Raggett.

All code is under MIT like the same jQuery license, even if I always prefer GPL.


HTML supports three kinds of lists.

Unordered list

The first kind is a bulletted list, often called an unordered list. It uses the ul and li tags:

Ordered list

The second kind of list is a numbered list, often called an ordered list. It uses the ol and li tags. For instance:
  1. Alpha
  2. Beta
  3. Gamma

Definition List

The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a dl tag and ends with /dl. Each term starts with a dt tag and each definition starts with a dd. For instance:
World Wide Web
HyperText Markup Language
People Can't Memorize Computer Industry Acronyms


W3C MathML

<math style="font-size: 26pt;"> χ = <mfrac> <mrow> -b &#xB1; <msqrt><mrow><msup>b<mn>2</mn></msup> - 4ac</mrow></msqrt> </mrow> <mrow>2a</mrow> </mfrac> </math> χ = -b ± b2 - 4ac 2a

Footnotes module

Text text text<a note="this is my footnote"></a> text text text...
<div id="note-list"></div> <!-- display footnotes here -->

Bibliography module

Text text<a cite="XXX"></a> text text<a cite="XXX" section="2.24"></a> text text text...
<ol id="bibliography">
<li label="XXX">...


<!-- title page --> <header> <h1>Writting documents with jQuery</h1> <div class="version">2.1</div> <div class="author">Nicholas Christopoulos</div> <div class="email"><a href="mailto:nereus@freemail.gr">nereus@freemail.gr</a></div> <div class="date">Athens, 1 Jan 2015</div> </header> <!-- abstract --> <div class="abstract"> <h4>Abstract</h4> This is an 'abstract' class div... </div> <!-- here prints the TOC --> <div id="tableofcontents"> <h2>Contents</h2> </div> <!-- our text starts here --> <main> <h2>Section 1</h2> ... <h3>Subsection</h3> ... <h4>Subsubection</h4> ... </main> <!-- end of our text --> <!-- footnotes (inside or outside of main, there is no difference) --> <div id="note-list"></div> <!-- display footnotes here --> <!-- bibliography --> <h2>References</h2> <ol id="bibliography"> <li label="mrx">Karl Marx and Friedrich Engels, <q>Διαλεχτά έργα</q>, 2 τόμοι, Εκδοτικός οίκος <q>Γνώσεις</q>. <li label="cm1">Karl Marx and Friedrich Engels, <a href="http://goo.gl/EQZotc"><q class="en">Manifesto of the Communist Party</q></a>, original 1848, publiced 1910 by CHARLES H. KERR &amp; COMPANY. ... </ol> <footer> Copyright © 2004-2015, Nicholas Christopoulos, email <a href="mailto:nereus@freemail.gr">nereus@freemail.gr</a> </footer>

All those tags can be omitted. You can get the scripts and the example by right click -> View Source Code. That's all folks.

I wrote those scripts for the politics.html. You can see it in real demo.


  1. Karl Marx and Friedrich Engels, Διαλεχτά έργα, 2 τόμοι, Εκδοτικός οίκος Γνώσεις.
  2. Karl Marx and Friedrich Engels, Manifesto of the Communist Party, original 1848, publiced 1910 by CHARLES H. KERR & COMPANY.
  3. Mikhail Bakunin, God and the State, this edition was translated by Benjamin R. Tucker and published in the United States in 1916, Wikisource.
  4. Μιχαήλ Β. Σακελλαρίου, Η Αθηναϊκή Δημοκρατία, Πανεπιστημιακές εκδόσεις Κρήτης.
  5. R. M. Stallman, Free Software Licences, Free Software Foundation.
  6. Elika J. Etemad (Mozilla) and Koji Ishii (Rakuten, Inc.), CSS Text Module Level 3, W3C Last Call Working Draft 10 October 2013.