User:Ziounclesi/latexvscss

Intro
In response to a challenge from Tobias Oetiker, the author of lshort, or 'The not-so-short introduction to LaTex'.

The first chapter in particular offers some sort of comparison to WYSIWYG editors (1.2 Basics 1.2.1 Author, Book Designer, and Typesetter), but no comparison to HTML5+CSS+SVG markup.

So here we go, and try to explain some of the underlying differences in approach, design, execution and output.

Approach
TeX and CSS were produced in two different eras of publication. In the 1970's, print was the main form of communication within the scientific community. In the '00s, Internet had become the main way to spread technical and scientific information.

TeX is designed to produce a high quality hardcopy printed text of a specific size. The aim is to provide a system that offers an expert user fine control over the output, with the expectation that expert users would assemble ready-to-use formats that would require minimal input from users with little knowledge of printing.

CSS is designed to produce a best effort view of web pages in many different viewers of different size and resolution, aiming for separation of concerns, page consistency, bandwidth reduction by elimination of repetitions, power of layout and graphical expression. CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. However, its creators, and in particular Håkon Wium Lie, have also promoted the concept of printing from the web.

Input
TeX input is one or more files where content is interspersed with instructions on how it must be rendered in print.

CSS content will be in HTML and/or SVG files. Simplifying a bit, the styles to be applied are linked to the content and by an id (a specific element) or class (all elements of the same class)

Output
TeX output is a file that describes the pages to print, and requires font files and a printer driver to produce a hardcopy.

CSS requires font files and a rendering engine, usually in a browser to produce an interactive image (painting). Each web browser uses a layout engine to render web pages, and support for CSS functionality is not consistent between them. Because browsers do not parse CSS perfectly, multiple coding techniques have been developed to target specific browsers with workarounds (commonly known as CSS hacks or CSS filters).

Inheritance
I. is a key feature in CSS; it relies on the ancestor-descendant relationship to operate. Inheritance is the mechanism by which properties are applied not only to a specified element but also to its descendants. Inheritance relies on the document tree, which is the hierarchy of XHTML elements in a page based on nesting. Descendant elements may inherit CSS property values from any ancestor. Some properties may be inherited, others not.

Positioning
CSS has different positioning schemes: normal (inline-horizontal or block-vertical), float and absolute.

TeX uses absolute for lines, and relative within lines.

Execution
TeX / LaTex TeX is a macro- and token-based language: many commands, including most user-defined ones, are expanded on the fly until only unexpandable tokens remain, which are then executed. The result of processing a .tex input file is a .dvi file that describes the layout of printable characters on a page of specified size. The TeX system has precise knowledge of the sizes of all characters and symbols, and using this information, it computes the optimal arrangement of letters per line and lines per page. It then produces a DVI file ("DeVice Independent") containing the final locations of all characters. This DVI file can then be printed directly given an appropriate printer driver, or it can be converted to other formats (most commonly PDF). Brackets are used to enclose Groups, but most commands have no 'end' tag.

CSS is interpreted and relies on a tree representation of the document (DOM). The nature of a web page is dynamic (events, scrolling, hovering, following links) and the CSS is continually re-evaluated as events occur.

The 'C' for 'cascading' means that any amount of potentially contradictory or overlapping tags may be nested, and the interpreter (rendering engine), that is in the client reader (usually a browser program) will decide which instructions 'win'. The size of the output format (window) is provided by the browser at execution time.