Home → Questions →

Right-to-left languages e.g. Arabic and mixed language documents

• Edit

tim.at.ast@gmail.com

02 Feb, 2014 12:20 PM

Hi
I write a lot of mixed English / Arabic documents, and so I need to use Right-to-left text.
I found this HTML command (in markdown, preceded by 4 spaces) which allowed me to verify that Marked2 displayed correctly.

my_text

I have 2 questions:
1) Can I modify a CSS and then label paragraphs with a tag (like %English, or %Arabic) to get Marked2 to display paragraphs either as English or Arabic?
2) how easy is it to do this? I know no CSS but am happy tinkering with CSS templates.

thanks,

tim

1. 1 Posted by tim.at.ast@gmai... on 02 Feb, 2014 12:23 PM

   

   oops, the html command was parsed, instead of quoted. my bad.

   it should be

   my text

   • Edit

2. Support Staff 2 Posted by Brett on 02 Feb, 2014 02:16 PM

   

   The only way I can think of to do this would be to use Kramdown or
   another Markdown processor that allows you to assign classes to block
   elements. Then you can add something like:

   {:.arabic }

   Right after a paragraph or other element. That would assign the class
   "arabic" to the element, and you could add RTL CSS for it in a custom
   stylesheet.

   -Brett

   • Edit

3. 3 Posted by tim.at.ast@gmai... on 03 Feb, 2014 05:57 AM

   

   Hi Brett,
   ok, if I want to use kramdown, can I use it with Marked2 'enable custom processor'?
   i just bought marked2 and i like it a lot!
   thanks
   tim

   ps. the feature of kramdown for assigning classes to blocks; do you predict that this will become a feature of markdown/supermarkdown in the near future?

   • Edit

4. Support Staff 4 Posted by Brett on 03 Feb, 2014 02:06 PM

   

   You'll need to install kramdown with `sudo gem install kramdown` in
   terminal, then run `which kramdown` to determine the path to paste into
   the custom processor field. Enable the custom processor (optionally to
   run by default when opening new windows) and you should be good to go.

   I don't think attributes and classes will ever be part of the standard
   MD extensions. Also note that some things may require slightly different
   syntax than you're used to, though I can't think of any other variances
   offhand.

   -Brett

   • Edit

5. 5 Posted by tim.at.ast@gmai... on 08 Feb, 2014 05:57 PM

   

   Hi Brett,

   thankyou for your help so far.

   I have successfully installed kramdown and got to use a few of its features, including assigning classes to block elements in english text. So I know the CSS works, and kramdown works via Marked2 in simple cases.

   However, as soon as any paragraph has a single Arabic character, Marked2 doesn’t play with kramdown any more. All of the paragraphs are simply interpreted as plain text, and kramdown commands are not parsed. The only strange exception is that the H1 heading is formatted correctly.

   Is this a problem with Marked2 or a problem with kramdown? Marked2 certainly doesn’t report any errors, and the green light button on the preview indicates that Marked2 believes it is using the kramdown processor. But it clearly isn’t.

   Thanks,

   Tim

   ————The following works in Marked2 with kramdown——
   #Testing kramdown with Marked2

   This first example uses kramdown abbreviation syntax:

   This is some text not written in HTML but in another language!

   *[another language]: It's called Markdown
   *[HTML]: HyperTextMarkupLanguage

   This is a sample sentence using kramdown class attributes. I just doubled the font size in the css.
   {:.big_size}

   Now I can go back to normal size.
   ————

   ————The following does not work in Marked2 with kramdown——

   #Testing kramdown with Marked2

   This first example uses kramdown abbreviation syntax:

   This is some text not written in HTML but in another language!

   *[another language]: It's called Markdown
   *[HTML]: HyperTextMarkupLanguage

   This is a sample sentence using kramdown class attributes. I just doubled the font size in the css.
   {:.big_size}

   Now I can go back to normal size.

   Here is a single arabic character ك
   This breaks everything. The paragraphs that used to appear properly no longer do.

   ————

   • Edit

6. Support Staff 6 Posted by Brett on 08 Feb, 2014 06:11 PM

   

   What's happening is that the unicode symbol is causing Kramdown to fail and then reverting to the default Markdown processor. Are you running Kramdown directly from the binary, or do you have a custom processor script set up? The latter is probably going to be necessary to work around this.

   #!/usr/bin/ruby
   
   require 'rubygems'
   require 'kramdown'
   
   if RUBY_VERSION.to_f > 1.9
       Encoding.default_external = Encoding::UTF_8
       Encoding.default_internal = Encoding::UTF_8
       input = STDIN.read.force_encoding('utf-8')
   else
       input = STDIN.read
   end
   
   print Kramdown::Document.new(input).to_html
   

   If you have a script like that and make it executable (chmod a+x script.rb), it should solve the issue.

   • Edit

7. 7 Posted by tim.at.ast@gmai... on 08 Feb, 2014 06:31 PM

   

   Dear Brett,

   thank you very much

   It all works now, and is fantastic. I will be able to do my mixed language docs easily.
   Is there anything I can do in return?

   Do you think this is a bug I should report to kramdown?

   Tim

   • Edit

8. Support Staff 8 Posted by Brett on 08 Feb, 2014 06:35 PM

   

   No, it's a Ruby encoding issue, not Kramdown or Markdown's fault. Just
   something we have to deal with in the new version of Ruby.

   Glad to hear it's all working!

   -Brett

   • Edit

9. 9 Posted by tim.at.ast@gmai... on 08 Feb, 2014 08:03 PM

   

   Sorry to pursue this matter to the nth degree, but what do you think of this suggestion?

   1) put an inline HTML immediately prior to the Arabic paragraphs like:
   <p class="arabic”>

   Then I wouldn’t need kramdown at all. Kramdown is also currently requiring me to add a snippet {:.arabic}

   2) to make life easier, make a code like “&&" and use Marked2’s pre-processor to find/replace “&&” with <p class=“arabic”>

   I am just wondering whether kramdown is really saving me here, or whether I could ignore it.

   Tim

   • Edit

10. Support Staff 10 Posted by Brett on 08 Feb, 2014 08:38 PM

    

    The problem is that you have to close that <p class="arabic"> tag with a
    </p> after the paragraph. And you won't be able to use it easily inside
    a list or other element. This makes substituting a single token pretty
    hard, so you'd probably want to have a /&& tag to close them as well.
    Then you have to make sure MultiMarkdown is set up in preferences to
    process Markdown inside of HTML, otherwise it won't work within the <p>
    tags. If you can cover all of that, you could skip Kramdown, but the
    kramdown solution seems easier to me.

    • Edit

11. 11 Posted by talazem on 03 Dec, 2015 09:29 AM

    

    Hello. I am reviving this thread to also request better built-in support for rendering RTL paragraphs, if possible. At the moment, there are two problems: punctuation does not follow the logical order, and Arabic paragraphs are left justified instead of right justified. Thank you for considering this.

    • Edit

12. Support Staff 12 Posted by Brett on 03 Dec, 2015 06:03 PM

    

    If you go into the Style preference pane and click "Edit CSS" next the
    the "Additional CSS" header, try pasting in:

    body {direction: rtl}

    Let me know if that solves the issues, and if so I'll make it a checkbox
    as well as attempt to determine it automatically from the system
    language.

    • Edit

13. 13 Posted by talazem on 03 Dec, 2015 08:01 PM

    

    Thanks. That changes the whole document to RTL, which will be useful in some cases. But what I am interested in is getting Latin script to automatically go LTR, and Arabic script to go RTL. Or, if it cannot be automated, to know what the minimal amount of html/css markup is needed in the body of my markdown text.

    • Edit

14. Support Staff 14 Posted by Brett on 03 Dec, 2015 08:49 PM

    

    This could probably be automated with a custom preprocessor, but not by Marked itself. Because the generation of the markup is handled by MultiMarkdown or Discount, Marked can't do per-paragraph language detection and change the markup, only for a full document.

    The minimum markup you'd need is a style attribute on the containing element. For example, if you wrap a paragraph with a div, it would look like:

    <div style="direction:rtl">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    

    You'd want to make sure that "Process Markdown inside of HTML" is checked in Preferences->Processor.

    The easiest option would be to use a basic element like a blockquote and apply CSS to it. If you were, as an example, never going to use a blockquote for anything else in the document, create a CSS style that removed default blockquote formatting and applied the direction:rtl rule to it. Then just put > in front of anything to be displayed right to left. Given the limited number of available elements, though, that's probably not an ideal solution.

    As an alternative, you could use kramdown as a custom processor, which would then allow you to use this syntax to add a CSS class you could modify the direction on:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    {:.rtl}
    

    Then in CSS, just use:

    .rtl { direction: rtl; }
    

    So anything with {:.rtl} after it would appear right to left.

    -Brett

    • Edit

15. 15 Posted by talazem on 03 Dec, 2015 08:57 PM

    

    Of the options you mentioned, indeed I will give kramdown a shot. I suppose cluttering the text with {:.rtl) is a small price to pay for being able to include rtl text to a ltr markdown document.

    And while I don't think there is anything *I* could do with it, https://github.com/hasenj/bidiweb seems to be trying to address some of these concerns. I draw your attention to it in case something there can be baked in somewhere down the line.

    Thanks for all of your help and time.

    • Edit

16. Support Staff 16 Posted by Brett on 03 Dec, 2015 08:59 PM

    

    You could actually include bidiweb as a script tag in a document and
    have it run `bidiweb.style('#wrapper *');` if you wanted.

    • Edit

17. 17 Posted by talazem on 03 Dec, 2015 09:54 PM

    

    I have gotten the kramdown to work, following your directions here and above. Unfortunately, as I have no experience with this type of scripting, I am unclear as how to try your advice for bidiweb. I placed the following at the top of my markdown document:

    <script type="text/javascript" src="bidiweb.build.js"> </script>

    (if indeed that is what I was meant to do), but I don't know what to do with the `bidiweb.style('#wrapper *');` part. If you (or someone else) had a moment to explain, I'd be grateful. Many thanks again.

    • Edit

18. Support Staff 18 Posted by Brett on 03 Dec, 2015 09:57 PM

    

    You can just include a line following that one with:

    <script>bidiweb.style('#wrapper *');</script>

    If this becomes something you want to do regularly, you can make a
    simple preprocessor that inserts those lines automatically. Let me know
    if you need a hand doing that.

    -Brett

    • Edit

19. 19 Posted by talazem on 03 Dec, 2015 10:07 PM

    

    If making it into a preprocessor means that I need not ‘clutter’ my regular markdown files with anything else, then indeed your help would be most appreciated. Thank you, Brett.

    • Edit

20. Support Staff 20 Posted by Brett on 04 Dec, 2015 01:32 PM

    

    @talazem

    1. Download this script for the preprocessor
       
    2. Put the bidiweb.build.js file in a permanent location as you'll need to reference it with an absolute path
       
    3. Edit the scriptpreproc.rb file on line 4 to set the script_path to the permanent location of the bidiweb.build.js file
       

    4. Set up your custom processor like this:

       

    You can double check to see if it's working by viewing source in the preview (⌘U) and scrolling to the bottom, where you should see the script tags:

    

    On my system (using the direct version), this has worked perfectly with all themes. The same setup should work with the MAS version as well. It works so well that I may bake it in after all.

    Let me know how it goes.

    • Edit

21. 21 Posted by talazem on 04 Dec, 2015 02:35 PM

    

    As far as I can tell, this works absolutely perfectly. You have just removed a big hurdle in my ability to write in mixed English and Arabic using Markdown. Many, many thanks. And I am glad to see that my mentioning the existence of `bidiweb.build.js` has potentially led to support for RTL languages being built in to Marked. Thank you, again, for both the app and for your excellent support.

    • Edit

22. 22 Posted by talazem on 04 Dec, 2015 05:48 PM

    

    I have (hopefully a final) question regarding RTL support. When a Latin script and an Arabic script are mixed in one document, the Arabic font is often defined at a higher font size, around a proportion of 1:1.5 (English:Arabic).

    In light of the ruby script that we have now incorporated, is there any easy way to define that the Arabic script should be at font-size: 1.5em (for example), either using Marked's Additional CSS option in Preferences>Style, or some other way?

    (By the way, I also came across what appears to be another solution, this time using javascript, for the automating of RTL: http://stackoverflow.com/questions/25827756/change-the-font-based-on-language-css, with an example at http://jsfiddle.net/xfc2vwp5/. As I know nothing of these matters, I only post it in case it is of some help to you in baking a solution into Marked for automated RTL. Thanks again.)

    • Edit

23. Support Staff 23 Posted by Brett on 04 Dec, 2015 06:58 PM

    

    If you change the JavaScript command from .style to .css, it will apply a class (rtl) that you can then use to define styles, including size bump. You'll need this in Additional CSS:

    .rtl {direction:rtl; text-align:right; font-size:110%;}

    Or whatever font size specifier needed.

    • Edit

24. 24 Posted by talazem on 04 Dec, 2015 09:10 PM

    

    Many thanks, once again, Brett. That provides an especially good solution for cases in which the paragraphs are RTL but there is some LTR text interspersed (because the Latin letters usually must be set at a smaller size).

    • Edit

25. Brett closed this discussion on 06 Dec, 2015 03:23 PM.