rehype plugin to add dir=auto to elements.
- What is this?
- When should I use this?
- Install
- Use
- API
- Bugs
- Authoring
- HTML
- CSS
- Syntax
- Types
- Compatibility
- Security
- Related
- Contribute
- Notice
- License
This plugin improves support for bidirectional text in user content.
It adds dir=auto to several elements such as p and h1.
Doing so lets each element infer its directionality.
Without it,
the entire content would be one directionality.
What? Why!
Take the following HTML and try it in your browser.
It contains examples of paragraphs in Yiddish and in English,
with different combinations of dir attributes.
<!doctype html>
<html lang=en>
<meta charset=utf8>
<title>Example</title>
<style>
body { font-family: system-ui; margin: 0 auto; max-width: 40em }
div, p { border: 1ex solid tomato; margin: 1ex; padding: 1ex; position: relative }
p { padding: 1ex 12ex }
:is(div, p)::after { background-color: tomato; content: "no dir"; padding: 1ex; position: absolute; right: 0; top: 0 }
:is(div, p)[dir]::after { content: "[dir=" attr(dir) "]" }
</style>
<div>
<p lang=yi>א גוטן טאג</p>
<p>Good day</p>
</div>
<div dir="auto">
<p lang=yi>א גוטן טאג</p>
<p>Good day</p>
</div>
<div dir="ltr">
<p lang=yi>א גוטן טאג</p>
<p>Good day</p>
</div>
<div dir="rtl">
<p lang=yi>א גוטן טאג</p>
<p>Good day</p>
</div>
<div>
<p dir="auto" lang=yi>א גוטן טאג</p>
<p dir="auto">Good day</p>
</div>Yields:
This plugin is part of a monorepo rehype-github.
See its readme for more info.
You can use this plugin when you want to match how github.com works or when you want to build similar pipelines that lets users write in a different directionality than your own website, or to use different directionalities in their content.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install rehype-github-dirIn Deno with esm.sh:
import rehypeGithubDir from 'https://esm.sh/rehype-github-dir@1'In browsers with esm.sh:
<script type="module">
import rehypeGithubDir from 'https://esm.sh/rehype-github-dir@1?bundle'
</script>Say our module example.js looks as follows:
import rehypeGithubDir from 'rehype-github-dir'
import rehypeParse from 'rehype-parse'
import rehypeStringify from 'rehype-stringify'
import {unified} from 'unified'
const file = await unified()
.use(rehypeParse, {fragment: true})
.use(rehypeGithubDir)
.use(rehypeStringify)
.process('<p>א גוטן טאג</p>\n<p>Good day</p>')
console.log(String(file))…now running node example.js yields:
<p dir="auto">א גוטן טאג</p>
<p dir="auto">Good day</p>This package exports the identifier defaultInclude.
The default export is rehypeGithubDir.
List of tag names that github.com enhances (Array<string>).
Plugin to add dir=auto to elements.
options(Options) — configuration
Configuration (TypeScript type).
include(Array<string>, default:defaultInclude) — elements to enhance; the default behavior is to adddirtodiv,h1,h2,h3,h4,h5,h6,ol,p, andul
Right-to-left language rendering on GitHub is within progress.
See community/community#8115 for more info.
Just be careful that the behavior on GitHub is, through HTML itself, dependent on the first character that is strongly right-to-left or left-to-right. Not based on a “predominatly used” heuristic.
The markup for that github.com adds is:
dir="auto"No CSS is needed.
No syntax is applicable.
This package is fully typed with TypeScript.
It exports the additional type Options.
Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 16+. Our projects sometimes work with older versions, but this is not guaranteed.
This plugin works with rehype-parse version 3+,
rehype-stringify version 3+,
rehype version 5+,
and unified version 6+.
This package is safe.
remark-gfm— support GFM in remark
See contributing.md in rehypejs/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
This project is not affiliated with GitHub.