Writting documents with jQuery

Abstract

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.

Changelog

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.

Introduction

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.

Lists

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:

Alpha
Beta
Gamma

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:

Alpha
Beta
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:

WWW: World Wide Web
HTML: HyperText Markup Language
PCMCIA: People Can't Memorize Computer Industry Acronyms

Mathematics

W3C MathML

χ = \frac{-b ± \sqrt{b^{2} - 4ac}}{2a}

Footnotes module

example:

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

Bibliography module

example:

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

Structure

<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>  <div class="abstract"> <h4>Abstract</h4> This is an 'abstract' class div... </div>  <div id="tableofcontents"> <h2>Contents</h2> </div>  <main> <h2>Section 1</h2> ... <h3>Subsection</h3> ... <h4>Subsubection</h4> ... </main>   <div id="note-list"></div>   <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 & 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.