microJam - LaTeX Style

Subtitle

Max Muster1, Lisa Master2

1Hochschule Gartenstadt
2Universität Übersee
May 2020
Keywords: microjam, Jamstack, static page, Journal, LaTeX, math

Kurzfassung

This almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document. Write semantic HTML, add <link rel="stylesheet" href="https://latex.now.sh/style.css"> to the <head> of your project and you are good to go. The source code can be found on GitHub at https://github.com/vincentdoerig/latex-css.

Content

Introduction

The motivation behind the idea of having a webpage looking like a LaTeX document is to style web articles in the same way as research papers or handouts. So the intention is to generate both

from a single Markdown source document. Markdown parsers usually export semantic HTML, i.e. meaningful HTML elements only, while avoiding artificial <div class="context"> tags [1][2]. Styling those – from Markdown originated – HTML documents is accomplished best by using classless CSS stylesheets [3][4]. Styling semantic HTML with classless CSS

Especially the last point allows to easily switch to and compare different CSS styles [5][6]. This paper wants to focus on a classless CSS stylesheet for webpages looking like a LaTeX document.

Markdown to HTML

According to the CommonMark specification [2], basic Markdown translates into a limited set of semantic HTML elements.

<a>, <blockquote>, <code>, <em>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <img>, <li>, <ol>, <p>, <pre>, <strong>, <ul>

For supporting these elements only, we would merely need a small CSS file. But we might recall, that Markdown allows to embed plain HTML code. So we can use HTML inline elements besides regular Markdown inline rules.

Table 1: Some Inline Markdown / Markup

Markdown / Markup Result
A [link to the top](#top) A link to the top
*italic text* italic text
**strong text** strong text
***strong italic text*** strong italic text
~~strike through~~ strike through
<!--stripped comment-->
<u>underlining</u> underlining
Super<sup>script</sup> Superscript
Sub<sub>script</sub> Subscript
<small>Small text for fine print</small> Small text for fine print
<kbd>Alt</kbd>+<kbd>Ctrl</kbd> <kbd>Del</kbd> Alt+Ctrl Del
<abbr title="Cascading Style Sheets">CSS</abbr> CSS
Hilite text with <mark>mark</mark> Hilite text with mark
Hard line<br>break * Hard line
break
<q>... If not now, when?</q> &ndash; JFK ... If not now, when? – JFK
<span>L<q>a</q>T<q>e</q>X</span> ** LaTeX

* Beneath the <br> element we can also use two trailing spaces at the end of line.
** Topology and styling of this logo is discussed below.

Document Structure

The visual part of this document has a simple semantic structure:

<body>
  <header> ... </header>
  <main> ... </main>
</body>

The <header> section contains the paper's title, authors, author addresses, date and keywords. These data are to be found in a frontmatter metadata section at the beginning of the Markdown file. Those metadata will be processed via an HTML template file.

Your Markdown content goes into the <main> section and will then be parsed by markdown-it. Markdown does not assist you to structure your textual content any further. Especially it does not offer equivalent HTML <article> and <section> elements. But in fact it doesn't need to, as headings – the remaining structuring elements – are totally sufficient.

Heading

The style used here only supports 4 different headings for logical sectioning content.

# `<h1>` ... reserved for paper title
## `<h2>` ... primary section headings 
### `<h3>` ... lower level headings
#### `<h4>` ... special `heading` for tables, images, aside sections, source listings

We want to adapt the conventions from Tufte-CSS, where only two heading levels <h2> and <h3> are supported with reference to famous Feynman lectures on physics [8].

Paragraph

Markdown interpretes a sequence of text lines, separated from others by a blank line, as a paragraph and translates it into an HTML <p> element. In the same way you can't control text wrap with HTML, you cannot do that with Markdown. But as already mentioned, you can – as an exception to that rule – force a hard line break by using <br> or appending at least two trailing spaces at the end of the line.

Blockquote

Markdown uses email-style > characters for blockquoting.

> A human being is part of a whole called by us <q>Universe<q>.  
> -- *Albert Einstein*

A human being is part of a whole called by us Universe.
-- Albert Einstein

In scientific documents Theorems, Lemmas and Proofs are frequently written using blockquote syntax in Markdown.

Table

We can use a simple syntax for tables, which is a popular extension to the CommonMark standard [9].

#### Table 2:  Syntax
| Left | Center | Right |
|:---|---|--:|
|L|C|R|

Inline rules as shown in Table 1 apply to the table cells.

Table 2: Syntax

Left Center Right
L C R

Tables as a whole are always center-aligned. Note, how <h4> heading is used as the table heading / caption.

Code Blocks

We can insert preformatted text in code blocks enclosed by three backticks ``` on its own single line each.

```
M a t r i x
 [ 1 0 0 ]
 [ 0 1 0 ]
 [ 0 0 1 ]
```

Immediatelly following the begin-backticks we may specify the language for syntax highlighting.

```js
function print({x=0,y=0}) {
    return `(${x},${y}`;
};
console.log(print({x:3,y:4}));
```
#### Code Listing

The <h4> heading again can be comfortably used as a code block caption.

function print({x=0,y=0}) {
    return `(${x},${y}`;
};
console.log(print({x:3,y:4}));

Code Listing

The term "sidebar" describes "a portion of a document whose content is only indirectly related to the document's main content". The term "sidebar" comes from its frequently seen presentation as a visually separated box placed at the page's side.

"Sidebar" is no Markdown element. But we can use it here via the HTML <aside> element.

Images

Images are inline elements with the syntax ![alt text](/path/to/img "title").

![logo](./img/md.32x20-solid.png "logo") 
![logo dimensions](./img/markdown-mark-spec.png "logo dimensions")

So these images are displayed side by side.

logo logo dimensions

If we want to center-align an image and give it a caption, we might want to use the semantic HTML <figure> element instead.

<figure>
  <img src="./img/triangle.png">
</figure>

Fig 1.: Right Triangle

The figure caption can be placed below via our meanwhile universal <h4> (read: 'heading for' :) or in this case via the even more semantic HTML <figcaption> element.

Images are responsive, which we can verify by changing the size of the browser window.

Math

Inline and display math expressions are supported via markdown-it plugin markdown-it-texmath [10]. The excerpt of a publication then might look like this [11]:

The symplectic ... there is

$$\bold J \frac{\partial\bold a}{\partial x} = \frac{\partial\bold a}{\partial y}\quad and \quad \bold J \frac{\partial\bold a}{\partial y} = -\frac{\partial\bold a}{\partial x}\,.$$

Complex structure ... (see $\bold J^2 = -\bold I$) ... the expression

$$c\,\bold a + d\,\tilde\bold a = \begin{pmatrix}c x - d y \\ c y + d x\end{pmatrix}\,,$$ (3.8)

The symplectic vector space is equipped with a complex structure J\bold J according to (2.6). This also holds in general for tangent vectors, so for vector a=(x,y)T\bold a = (x, y)^T there is

J∂a∂x=∂a∂yandJ∂a∂y=−∂a∂x .\bold J \frac{\partial\bold a}{\partial x} = \frac{\partial\bold a}{\partial y}\quad and \quad \bold J \frac{\partial\bold a}{\partial y} = -\frac{\partial\bold a}{\partial x}\,.

Complex structure J\bold J plays the role of the imaginary unit ii (see J2=−I\bold J^2 = -\bold I) performing a counterclockwise rotation by π/2 \pi/2\,. We can write down the expression

c a+d a~=(cx−dycy+dx) ,c\,\bold a + d\,\tilde\bold a = \begin{pmatrix}c x - d y \\ c y + d x\end{pmatrix}\,,(3.8)

Styling

Upto here we were mainly talking about content elements and structure. Styling – and with that LaTeX look and feel – wasn't mentioned significantly so far, apart from some positioning aspects.

In order to approach that LaTeX look and feel by Markdown authoring, we need a pure classless CSS stylesheet. Asking my search engine for 'latex css' gives after filtering four relevant hits:

The first CSS file from Huy Nguyen looks completely classless. Unfortunately its associated HTML example file is heavily class-dependent. No math is enabled. No special font files were used.

Andrew Belt – the second – has copied and modified a LaTeX CSS file from Wikipedia, which is far away from being classless. He offers a set of good looking 'Latin Modern Roman' fonts in his repository. He does math rendering via Mathjax scripting.

Vincent Dörig – the last – has recently published a very promising LaTeX CSS file.

Printing

Conclusion

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
– Said no one, ever.

Blockquotes can also be nested...

... by using additional greater-than signs right next to each other...

... or with spaces between arrows.

Lists

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

Inline Formatting

Pre-formatted text

P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~

Syntax highlighting

const foo = function (bar) {
  const str = 'hello';
  return bar++ +str;
};

console.log(foo(5));

References

[1] Daring Fireball
[2] CommonMark
[3] The Next CSS Frontier — Classless
[4] No-Class CSS Frameworks
[5] CSS Bed
[6] Drop-in Minimal CSS
[7] TeX and LaTeX logo POSHlets
[8] The Feyman Lectures on Physics
[9] CommonMark - Deployed Extensions
[10] markdown-it-texmath . [11] Source ResearchGate .