Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hosseinagha/persian-katex-plugin
KaTeX plugin that adds support for Persian formulas (Persian & Arabic characters and numerals)
https://github.com/hosseinagha/persian-katex-plugin
katex katex-plugin math-rendering persian-formula
Last synced: about 15 hours ago
JSON representation
KaTeX plugin that adds support for Persian formulas (Persian & Arabic characters and numerals)
- Host: GitHub
- URL: https://github.com/hosseinagha/persian-katex-plugin
- Owner: HosseinAgha
- License: mit
- Created: 2018-04-17T08:00:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-14T11:55:19.000Z (over 1 year ago)
- Last Synced: 2024-03-14T15:49:32.959Z (7 months ago)
- Topics: katex, katex-plugin, math-rendering, persian-formula
- Language: JavaScript
- Homepage: https://hosseinagha.github.io/persian-katex-plugin/
- Size: 4.46 MB
- Stars: 12
- Watchers: 3
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This is a [KaTeX](https://github.com/Khan/KaTeX) plugin that
adds support for Persian math formulas.
It adds the following to the KaTeX:
1. Support for Persian and Arabic numerals [۰-۹] in formulas (math mode)
2. Support for Persian and Arabic characters [unicode 0x0660 to 0x06FF] in text inside formules (text mode)
All the Persian and Arabic characters use open source [Vazir font](https://github.com/rastikerdar/vazir-font).
Usage
To use this plugin follow [KaTeX usage guidelines](https://github.com/Khan/KaTeX#usage)
in order to add KaTeX to your environment.
Then install the plugin by:
## npm
- install package:
```npm install persian-katex-plugin``` or ```yarn add persian-katex-plugin```
- import css files using a bundler like [`webpack`](https://webpack.js.org/) and [`css-loader`](https://github.com/webpack-contrib/css-loader):
```import 'perisan-katex-plugin/build/index.css'```
- you also need [`file-loader`](https://github.com/webpack-contrib/file-loader)
in your webpack config in order for the plugin to load font files.
Finally you need to add the plugin to KaTeX before calling `katex.render`.
Your final code should be something like this:
```javascript
import katex from 'katex';
import 'katex/dist/katex.css';
import addPersianTo from 'persian-katex-plugin';
import 'perisan-katex-plugin/build/index.css';
addPersianTo(katex);
```
All the persian and arabic characters will render using the 'Vazir' font.
You should change your western numeral characters ([0-9]) to eastern numerals [۰-۹].
## changing the font
As KaTeX calculates the character sizes statically (at compile time)
using a new font for your formulas is not as easy as changing the font of a css class. You can read this [awesome article on font metrics](http://westonthayer.com/writing/intro-to-font-metrics/) to better understand the situation!
To change the font of Persian and Arabic characters and numerals
you need to first calculate the character metrics for your font and then provide the metrics and fontName
to the plugin as its second options paramter.
1. using `persian-katex-plugin/utils/generateMetrics.js` script you can create a json file for your metrics.
Following is an example for how we generated default Vazir font metrics.
You have to provide the path to _truetype (ttf)_ files of your font (metrics are usually the same for other file types).
You also need to provide each font name in the following format: `[fontname]-[Regular/Bold/Italic/BoldItalic]`.
You can also provide an aditional unicodeRange array to define which range of unicode characters you want to extract from font file.
```javascript
const generateMetrics = require("perisan-katex-plugin/utils/generateMetrics");
const path = require("path");
const metricOptions = [
{
fontname: 'Vazir-Regular',
filepath: path.resolve("fonts/Vazir.ttf"),
// unicodeRange: defualts to [0x0600, 0x06FF]
},
{
fontname: 'Vazir-Bold',
filepath: path.resolve("fonts/Vazir-Bold.ttf"),
},
];
const outputPath = path.resolve(__dirname, "src/fontMetrics.json");
generateMetrics(metricOptions, outputPath);
```
2. After generating the font metrics file you need to add the metrics and font name options to the plugin.
```javascript
import katex from 'katex';
import 'katex/dist/katex.css';
import addPersianTo from 'persian-katex-plugin';
import 'perisan-katex-plugin/build/index.css';
import awesomeFontMetrics from 'path-to-awesomeFontMetrics.js';
addPersianTo(katex, {
fontName: "MyAwesomeFont",
fontMetrics: awesomeFontMetrics
});
```
3. finally add a font-face and following css class for each fontname you provided to generateFontMetrics.
```javascript
@font-face {
font-family: 'AwesomeFont-Regular';
font-weight: normal;
font-style: normal;
src: url('../fonts/AwesomeFont.woff2') format('woff2'),
url('../fonts/AwesomeFont.woff') format('woff'),
url('../fonts/AwesomeFont.ttf') format('ttf');
}
@font-face {
font-family: 'AwesomeFont-Bold';
font-weight: bold;
font-style: normal;
src: url('../fonts/AwesomeFont-Bold.woff2') format('woff2'),
url('../fonts/AwesomeFont-Bold.woff') format('woff'),
url('../fonts/AwesomeFont-Bold.ttf') format('ttf');
}
// bidi algorithm generates wrong result for
// inline persian and english \text combinations
// so we make all \text inline-block
.katex .mord.text .AwesomeFont-Regular,
.katex .mord.text .AwesomeFont-Bold {
display: inline-block;
}
.AwesomeFont-Regular {
font-family: 'AwesomeFont-Regular';
}
.AwesomeFont-Bold {
font-family: 'AwesomeFont-Bold';
}
```
Contribution
[](http://makeapullrequest.com)
run `yarn install` then `yarn run dev` to run development server.