@rod2ik/tikzjax 1.0.0-beta26 → 1.0.0-beta28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -16
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -7,14 +7,15 @@ See a live demo at [tikzjax.com](http://tikzjax.com/).
|
|
|
7
7
|
Note that the demo above is not the same as what you will get from what this branch of my fork. However, it does show
|
|
8
8
|
the general concept.
|
|
9
9
|
|
|
10
|
-
Thanks to Jim Fowler for doing all of the hard work. See [kisonecat/tikzjax](https://github.com/kisonecat/tikzjax),
|
|
10
|
+
* Thanks to Jim Fowler and for doing all of the hard work. See [kisonecat/tikzjax](https://github.com/kisonecat/tikzjax),
|
|
11
11
|
[kisonecat/web2js](https://github.com/kisonecat/web2js), and [kisonecat/dvi2html](https://github.com/kisonecat/dvi2html)
|
|
12
|
-
for his original work.
|
|
12
|
+
for his original work.
|
|
13
|
+
* This work is a fork of Glenn Rice, that I hereby thank. See [drgrice1/tikjax](https://github.com/drgrice1/tikzjax), [drgrice1/web2js](https://github.com/drgrice1/web2js) and [drgrice1/web2js](https://github.com/drgrice1/dvi2html) for his work.
|
|
14
|
+
* The main enhancement of my work is to add the `tkz-tab` package, so as to embed **maths variation tables**, as SVGs, directly into HTML.
|
|
13
15
|
|
|
14
|
-
Also see [jhoobergs/web2js](https://github.com/jhoobergs/web2js) for additional changes that were made by Jesse Hoobergs
|
|
15
|
-
that were used in this work.
|
|
16
|
+
Also see [jhoobergs/web2js](https://github.com/jhoobergs/web2js) for additional changes that were made by Jesse Hoobergs that were used in this work.
|
|
16
17
|
|
|
17
|
-
##
|
|
18
|
+
## Examples
|
|
18
19
|
|
|
19
20
|
In the `<head>` of your HTML, include
|
|
20
21
|
|
|
@@ -27,20 +28,38 @@ In the `<head>` of your HTML, include
|
|
|
27
28
|
|
|
28
29
|
Then in the `<body>`, include TikZ code such as
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
* Simple `TikZ` syntax (without `tkz-tab` syntax):
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<script type="text/tikz">
|
|
35
|
+
\begin{tikzpicture}
|
|
36
|
+
\draw (0,0) circle (1in);
|
|
37
|
+
\end{tikzpicture}
|
|
38
|
+
</script>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
* With the `tkz-tab` syntax:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<script type="text/tikz" data-tex-packages='{"tkz-tab": ""}'>
|
|
45
|
+
\begin{tikzpicture}
|
|
46
|
+
\tkzTab{$x$ / 1 , $\cos(x)$ / 1, $\sin(x)$ / 1.5}{$0$, $\displaystyle \frac{\pi}{2}$, $\pi$}
|
|
47
|
+
{, +, z, -, }
|
|
48
|
+
{-/ 0, +/ 1, -/ 0}
|
|
49
|
+
\end{tikzpicture}
|
|
50
|
+
</script>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
produces the following `svg` image (an *svg* tag is embeded into HTML):
|
|
54
|
+
|
|
55
|
+
<center><img src="./vartable.jpg" /></center>
|
|
37
56
|
|
|
38
57
|
The TikZ code will be compiled into an SVG image, and the `<script>` element will be replaced with the generated SVG
|
|
39
58
|
image.
|
|
40
59
|
|
|
41
60
|
## How does this work?
|
|
42
61
|
|
|
43
|
-
Using the main branch of [
|
|
62
|
+
Using the main branch of [rod2ik/web2js](https://github.com/rod2ik/web2js) the Pascal source of `TeX` is compiled to
|
|
44
63
|
WebAssembly, and the `LaTeX` format is loaded (without all the hyphenation data). Then
|
|
45
64
|
|
|
46
65
|
```tex
|
|
@@ -48,10 +67,11 @@ WebAssembly, and the `LaTeX` format is loaded (without all the hyphenation data)
|
|
|
48
67
|
\def\pgfsysdriver{pgfsys-ximera.def}
|
|
49
68
|
\usepackage[svgnames]{xcolor}
|
|
50
69
|
\usepackage{tikz}
|
|
70
|
+
\usepackage{tkz-tab}
|
|
51
71
|
```
|
|
52
72
|
|
|
53
73
|
is executed. Then the core is dumped and compressed. The WebAssembly and core are loaded in the browser and executed. An
|
|
54
|
-
SVG driver for PGF along with the [
|
|
74
|
+
SVG driver for PGF along with the [rod2ik/dvi2thml](https://github.com/rod2ik/dvi2html) library are then utilized to
|
|
55
75
|
convert the DVI output into to an SVG image.
|
|
56
76
|
|
|
57
77
|
All of this happens in the browser.
|
|
@@ -157,9 +177,9 @@ document.addEventListener('tikzjax-load-finished', function(e) {
|
|
|
157
177
|
|
|
158
178
|
## Building
|
|
159
179
|
|
|
160
|
-
First clone this GitHub repository [https://github.com/
|
|
180
|
+
First clone this GitHub repository [https://github.com/rod2ik/tikzjax](https://github.com/rod2ik/tikzjax).
|
|
161
181
|
|
|
162
|
-
Then clone my fork of web2js [https://github.com/
|
|
182
|
+
Then clone my fork of web2js [https://github.com/rod2ik/web2js](https://github.com/rod2ik/web2js). Follow the
|
|
163
183
|
directions in the README for a "quick path to generate the tex.wasm and core.dump files". Then copy the generated
|
|
164
184
|
core.dump and tex.wasm files to the tikzjax directory, and gzip them.
|
|
165
185
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rod2ik/tikzjax",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-beta28",
|
|
4
4
|
"description": "TikZJax loader",
|
|
5
5
|
"author": "Jim Fowler",
|
|
6
6
|
"contributors": [
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"serve": "webpack serve --mode development"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@rod2ik/dvi2html": "^0.0.7-
|
|
32
|
+
"@rod2ik/dvi2html": "^0.0.7-beta5",
|
|
33
33
|
"buffer": "^6.0.3",
|
|
34
34
|
"idb": "^8.0.1",
|
|
35
35
|
"pako": "^2.1.0",
|