tag:support.markedapp.com,2011-09-11:/discussions/questions/4951-right-to-left-languages-eg-arabic-and-mixed-language-documentsMarked: Discussion 2015-12-06T15:23:12Ztag:support.markedapp.com,2011-09-11:Comment/314143742014-02-02T12:20:39Z2014-06-10T19:49:09ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>Hi<br>
I write a lot of mixed English / Arabic documents, and so I need to
use Right-to-left text.<br>
I found this HTML command (in markdown, preceded by 4 spaces) which
allowed me to verify that Marked2 displayed correctly.<br></p>
<div>my_text</div>
<p>I have 2 questions:<br>
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?<br>
2) how easy is it to do this? I know no CSS but am happy tinkering
with CSS templates.</p>
<p>thanks,</p>
<p>tim</p></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-02T12:23:02Z2014-06-10T19:49:09ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>oops, the html command was parsed, instead of quoted. my
bad.</p>
<p>it should be</p>
<blockquote>
<div>my text</div>
</blockquote></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-02T14:16:10Z2014-02-02T14:16:10ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>The only way I can think of to do this would be to use Kramdown
or<br>
another Markdown processor that allows you to assign classes to
block<br>
elements. Then you can add something like:</p>
<pre>
<code>{:.arabic }</code>
</pre>
<p>Right after a paragraph or other element. That would assign the
class<br>
"arabic" to the element, and you could add RTL CSS for it in a
custom stylesheet.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742014-02-03T05:57:22Z2014-06-10T19:49:09ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>Hi Brett,<br>
ok, if I want to use kramdown, can I use it with Marked2 'enable
custom processor'?<br>
i just bought marked2 and i like it a lot!<br>
thanks<br>
tim</p>
<p>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?</p></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-03T14:06:35Z2014-02-03T14:06:35ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>You'll need to install kramdown with <code>sudo gem install
kramdown</code> in<br>
terminal, then run <code>which kramdown</code> to determine the
path to paste into<br>
the custom processor field. Enable the custom processor (optionally
to<br>
run by default when opening new windows) and you should be good to
go.</p>
<p>I don't think attributes and classes will ever be part of the
standard<br>
MD extensions. Also note that some things may require slightly
different<br>
syntax than you're used to, though I can't think of any other
variances<br>
offhand.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T17:57:50Z2014-06-10T19:49:10ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>Hi Brett,</p>
<p>thankyou for your help so far.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Thanks,</p>
<p>Tim</p>
<p>————The following works in Marked2 with
kramdown——<br>
#Testing kramdown with Marked2</p>
<p>This first example uses kramdown abbreviation syntax:</p>
<p>This is some text not written in HTML but in another
language!</p>
<p>*[another language]: It's called Markdown *[HTML]:
HyperTextMarkupLanguage</p>
<p>This is a sample sentence using kramdown class attributes. I
just doubled the font size in the css.<br>
{:.big_size}</p>
<p>Now I can go back to normal size.<br>
————</p>
<p>————The following does not work in
Marked2 with kramdown——</p>
<p>#Testing kramdown with Marked2</p>
<p>This first example uses kramdown abbreviation syntax:</p>
<p>This is some text not written in HTML but in another
language!</p>
<p>*[another language]: It's called Markdown *[HTML]:
HyperTextMarkupLanguage</p>
<p>This is a sample sentence using kramdown class attributes. I
just doubled the font size in the css.<br>
{:.big_size}</p>
<p>Now I can go back to normal size.</p>
<p>Here is a single arabic character ك<br>
This breaks everything. The paragraphs that used to appear properly
no longer do.</p>
<p>————</p></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T18:11:07Z2014-02-08T18:11:07ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p>
<pre>
<code>#!/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</code>
</pre>
<p>If you have a script like that and make it executable
(<code>chmod a+x script.rb</code>), it should solve the issue.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T18:31:03Z2014-06-10T19:49:10ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>Dear Brett,</p>
<p>thank you very much</p>
<p>It all works now, and is fantastic. I will be able to do my
mixed language docs easily.<br>
Is there anything I can do in return?</p>
<p>Do you think this is a bug I should report to kramdown?</p>
<p>Tim</p></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T18:35:56Z2014-02-08T18:35:56ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>No, it's a Ruby encoding issue, not Kramdown or Markdown's
fault. Just<br>
something we have to deal with in the new version of Ruby.</p>
<p>Glad to hear it's all working!</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T20:03:47Z2014-06-10T19:49:10ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>Sorry to pursue this matter to the nth degree, but what do you
think of this suggestion?</p>
<p>1) put an inline HTML immediately prior to the Arabic paragraphs
like:<br></p>
<p class="arabic”>"></p>
<p>Then I wouldn’t need kramdown at all. Kramdown is also
currently requiring me to add a snippet {:.arabic}</p>
<p>2) to make life easier, make a code like “&&" and
use Marked2’s pre-processor to find/replace
“&&” with</p>
<p class="“arabic”"></p>
<p>I am just wondering whether kramdown is really saving me here,
or whether I could ignore it.</p>
<p>Tim</p></div>tim.at.ast@gmail.comtag:support.markedapp.com,2011-09-11:Comment/314143742014-02-08T20:38:45Z2014-02-08T20:38:45ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>The problem is that you have to close that</p>
<p class="arabic">tag with a<br></p>
after the paragraph. And you won't be able to use it easily
inside<br>
a list or other element. This makes substituting a single token
pretty<br>
hard, so you'd probably want to have a /&& tag to close
them as well.<br>
Then you have to make sure MultiMarkdown is set up in preferences
to<br>
process Markdown inside of HTML, otherwise it won't work within the
<p><br>
tags. If you can cover all of that, you could skip Kramdown, but
the<br>
kramdown solution seems easier to me.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T09:29:33Z2015-12-03T09:29:33ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T18:03:09Z2015-12-03T18:03:09ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>If you go into the Style preference pane and click "Edit CSS"
next the<br>
the "Additional CSS" header, try pasting in:</p>
<p>body {direction: rtl}</p>
<p>Let me know if that solves the issues, and if so I'll make it a
checkbox<br>
as well as attempt to determine it automatically from the
system<br>
language.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T20:01:26Z2015-12-03T20:01:29ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T20:49:20Z2015-12-03T20:49:20ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p>
<p>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:</p>
<pre>
<code><div style="direction:rtl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div></code>
</pre>
<p>You'd want to make sure that "Process Markdown inside of HTML"
is checked in Preferences->Processor.</p>
<p>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 <code>direction:rtl</code> rule to it. Then just put
<code>></code> 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.</p>
<p>As an alternative, you could use <a href="http://kramdown.gettalong.org/">kramdown</a> as a custom
processor, which would then allow you to use this syntax to add a
CSS class you could modify the direction on:</p>
<pre>
<code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{:.rtl}</code>
</pre>
<p>Then in CSS, just use:</p>
<pre>
<code>.rtl { direction: rtl; }</code>
</pre>
<p>So anything with <code>{:.rtl}</code> after it would appear
right to left.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T20:57:29Z2015-12-03T20:57:30ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p>
<p>And while I don't think there is anything <em>I</em> could do
with it, <a href="https://github.com/hasenj/bidiweb">https://github.com/hasenj/bidiweb</a>
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.</p>
<p>Thanks for all of your help and time.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T20:59:31Z2015-12-03T20:59:31ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>You could actually include bidiweb as a script tag in a document
and<br>
have it run <code>bidiweb.style('#wrapper *');</code> if you
wanted.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T21:54:15Z2015-12-03T21:54:15ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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:</p>
<p>(if indeed that is what I was meant to do), but I don't know
what to do with the <code>bidiweb.style('#wrapper *');</code> part.
If you (or someone else) had a moment to explain, I'd be grateful.
Many thanks again.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T21:57:50Z2015-12-03T21:57:50ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>You can just include a line following that one with:</p>
<pre>
<code><script>bidiweb.style('#wrapper *');</script></code>
</pre>
<p>If this becomes something you want to do regularly, you can make
a<br>
simple preprocessor that inserts those lines automatically. Let me
know<br>
if you need a hand doing that.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-03T22:07:10Z2015-12-03T22:07:10ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-04T13:32:00Z2015-12-04T13:32:00ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>@talazem</p>
<ol>
<li>Download <a href="http://ckyp.us/1bp1l+">this script</a> for
the preprocessor<br></li>
<li>Put the <code>bidiweb.build.js</code> file in a permanent
location as you'll need to reference it with an absolute
path<br></li>
<li>Edit the <code>scriptpreproc.rb</code> file on line 4 to set
the script_path to the permanent location of the bidiweb.build.js
file<br></li>
<li>
<p>Set up your custom processor like this:</p>
<p><img alt="" src="http://ckyp.us/6nzl+"></p>
</li>
</ol>
<p>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:</p>
<p><img alt="" src="http://ckyp.us/14DOf+"></p>
<p>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.</p>
<p>Let me know how it goes.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-04T14:35:56Z2015-12-04T14:35:57ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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 <code>bidiweb.build.js</code>
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.</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-04T17:48:08Z2015-12-04T17:48:09ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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).</p>
<p>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?</p>
<p>(By the way, I also came across what appears to be another
solution, this time using javascript, for the automating of RTL:
<a href="http://stackoverflow.com/questions/25827756/change-the-font-based-on-language-css">
http://stackoverflow.com/questions/25827756/change-the-font-based-o...</a>,
with an example at <a href="http://jsfiddle.net/xfc2vwp5/">http://jsfiddle.net/xfc2vwp5/</a>.
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.)</p></div>talazemtag:support.markedapp.com,2011-09-11:Comment/314143742015-12-04T18:58:34Z2015-12-04T18:58:34ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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:</p>
<p>.rtl {direction:rtl; text-align:right; font-size:110%;}</p>
<p>Or whatever font size specifier needed.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/314143742015-12-04T21:10:59Z2015-12-04T21:10:59ZRight-to-left languages e.g. Arabic and mixed language documents<div><p>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).</p></div>talazem