Adding RTL support

[yoelbassin]

Hey!
Thank you for this amazing product 😄
Marp is great and I love it, though the main drawback for me is that there is no RTL support.

The approach that GitLab and GitHub took is adding dir=" auto" to all the tags, but unfortunately, this isn't in the CommonMark specification yet, which is being followed by most Markdown projects. Thus, the markdown-it project doesn't support this feature (as was discussed in this issue).

A similar feature was discussed here at #238, and the solution was to add direction: rtl in the CSS styling for the slide, so the entire slide will be rtl. However, as mentioned in the W3C Structural markup and right-to-left text in HTML, using direction: rtl is discouraged ~ "Never use CSS to apply the base direction".

Moreover, using rtl for the entire slide isn't always the case. Combining RTL languages and LTR languages is common, a great example is providing code snippets in an RTL presentation.

Adding dir="auto" to the marpit project isn't a big issue, but I would like to discuss it first.

Thanks!

[yhatt]

You can try to plug markdown-it plugin(s) to Marp, that was mentioned at markdown-it/markdown-it#635 (comment). This is an example to add dir="auto" attribute to each slide and its children.

// engine.mjs
import markdownItBidi from 'markdown-it-bidi'

export default ({ marp }) => marp
  .use(markdownItBidi) // Add dir="auto" to each element in slide
  .use((md) => {
    if (state.inlineMode) return
    
    md.core.ruler.after('marpit_directives_apply', 'marp_plugin_bidi', (state) => {
      for (const token of state.tokens) {
        // Add dir="auto" to each slide element
        if (token.type === 'marpit_slide_open') token.attrSet('dir', 'auto')
      }
    });
  })

npm i --save @marp-team/marp-cli markdown-it-bidi
npx marp --engine ./engine.mjs slide.md

If there are many requests, we can consider to add dir="auto" support to Marpit or Marp Core. This is out of CommonMark so it may suit to add into Marp Core rather than Marpit framework.