2

how to export dir="rtl" into HTML file from an org buffer?

TL;DR: I want to export this simple org-buffer written in Arabic into HTML. The direction should be from right to left. I have this setting in .emacs relevant to the language just to enable writing from right to left in org-mode, but this is only a convenient way for writing and should not be necessary to try out the MWE below, so feel free to skip this setting if you want:

;; for right-to-left direction in org-mode
(defun set-bidi-env ()
  "interactive"
  (setq bidi-paragraph-direction 'nil))
(add-hook 'org-mode-hook 'set-bidi-env) 

MWE

#+TITLE: العنوان بالعربية
#+AUTHOR: اسم المؤلف
#+EMAIL: username@accountname.com
#+OPTIONS: toc:nil num:nil
#+LANGUAGE: ar
#+ATTR_HTML: :dir rtl
#+CREATOR: Emacs 25.1.50.2 (Org mode 8.3.4)

* تعريف بالارقام الهندية او الشرقية ١، ٢، ٣

** النقطة الاولى

** الثانية

** الثالثة

** وهكذا
* النهاية

#+CAPTION: المواد المطلوبة
#+NAME: tab:items

| تسلسل | المادة  | العدد      |
|-------+---------+------------|
| ١     | طحين    | ٥ كيلوغرام |
| ٢     | رز      | ٣ كيلوغرام |
| ٣     | بطيخ    | ٢ كيلوغرام |
| ٤     | قرنابيط | ٢ كيلوغرام |
|-------+---------+------------|

To export org-buffer into HTML and open it in the default browser, one has to hit: C-c C-e h o

The exported .html file should be generated in the working directory:

Exported HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar"><!-- change here! -->
<head>
<!-- 2016-04-08 Fri 10:52 -->
<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta  name="viewport" content="width=device-width, initial-scale=1" />
<title>العنوان بالعربية</title>
<meta  name="generator" content="Org-mode" />
<meta  name="author" content="اسم المؤلف" />
<style type="text/css">
 <!--/*--><![CDATA[/*><!--*/
  .title  { text-align: center;
             margin-bottom: .2em; }
  .subtitle { text-align: center;
              font-size: medium;
              font-weight: bold;
              margin-top:0; }
  .todo   { font-family: monospace; color: red; }
  .done   { font-family: monospace; color: green; }
  .priority { font-family: monospace; color: orange; }
  .tag    { background-color: #eee; font-family: monospace;
            padding: 2px; font-size: 80%; font-weight: normal; }
  .timestamp { color: #bebebe; }
  .timestamp-kwd { color: #5f9ea0; }
  .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
  .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
  .org-center { margin-left: auto; margin-right: auto; text-align: center; }
  .underline { text-decoration: underline; }
  #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  p.verse { margin-left: 3%; }
  pre {
    border: 1px solid #ccc;
    box-shadow: 3px 3px 3px #eee;
    padding: 8pt;
    font-family: monospace;
    overflow: auto;
    margin: 1.2em;
  }
  pre.src {
    position: relative;
    overflow: visible;
    padding-top: 1.2em;
  }
  pre.src:before {
    display: none;
    position: absolute;
    background-color: white;
    top: -10px;
    right: 10px;
    padding: 3px;
    border: 1px solid black;
  }
  pre.src:hover:before { display: inline;}
  pre.src-sh:before    { content: 'sh'; }
  pre.src-bash:before  { content: 'sh'; }
  pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  pre.src-R:before     { content: 'R'; }
  pre.src-perl:before  { content: 'Perl'; }
  pre.src-java:before  { content: 'Java'; }
  pre.src-sql:before   { content: 'SQL'; }

  table { border-collapse:collapse; }
  caption.t-above { caption-side: top; }
  caption.t-bottom { caption-side: bottom; }
  td, th { vertical-align:top;  }
  th.org-right  { text-align: center;  }
  th.org-left   { text-align: center;   }
  th.org-center { text-align: center; }
  td.org-right  { text-align: right;  }
  td.org-left   { text-align: left;   }
  td.org-center { text-align: center; }
  dt { font-weight: bold; }
  .footpara { display: inline; }
  .footdef  { margin-bottom: 1em; }
  .figure { padding: 1em; }
  .figure p { text-align: center; }
  .inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
  }
  #org-div-home-and-up
   { text-align: right; font-size: 70%; white-space: nowrap; }
  textarea { overflow-x: auto; }
  .linenr { font-size: smaller }
  .code-highlighted { background-color: #ffff00; }
  .org-info-js_info-navigation { border-style: none; }
  #org-info-js_console-label
    { font-size: 10px; font-weight: bold; white-space: nowrap; }
  .org-info-js_search-highlight
    { background-color: #ffff00; color: #000000; font-weight: bold; }
  /*]]>*/-->
</style>
<script type="text/javascript">
/*
@licstart  The following is the entire license notice for the
JavaScript code in this tag.

Copyright (C) 2012-2013 Free Software Foundation, Inc.

The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version.  The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.


@licend  The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
 function CodeHighlightOn(elem, id)
 {
   var target = document.getElementById(id);
   if(null != target) {
     elem.cacheClassElem = elem.className;
     elem.cacheClassTarget = target.className;
     target.className = "code-highlighted";
     elem.className   = "code-highlighted";
   }
 }
 function CodeHighlightOff(elem, id)
 {
   var target = document.getElementById(id);
   if(elem.cacheClassElem)
     elem.className = elem.cacheClassElem;
   if(elem.cacheClassTarget)
     target.className = elem.cacheClassTarget;
 }
/*]]>*///-->
</script>
</head>
<body>
<div id="content">
<h1 class="title">العنوان بالعربية</h1>

<div id="outline-container-orgheadline5" class="outline-2">
<h2 id="orgheadline5">تعريف بالارقام الهندية او الشرقية ١، ٢، ٣</h2>
<div class="outline-text-2" id="text-orgheadline5">
</div><div id="outline-container-orgheadline1" class="outline-3">
<h3 id="orgheadline1">النقطة الاولى</h3>
</div>

<div id="outline-container-orgheadline2" class="outline-3">
<h3 id="orgheadline2">الثانية</h3>
</div>

<div id="outline-container-orgheadline3" class="outline-3">
<h3 id="orgheadline3">الثالثة</h3>
</div>

<div id="outline-container-orgheadline4" class="outline-3">
<h3 id="orgheadline4">وهكذا</h3>
</div>
</div>
<div id="outline-container-orgheadline6" class="outline-2">
<h2 id="orgheadline6">النهاية</h2>
<div class="outline-text-2" id="text-orgheadline6">
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">


<colgroup>
<col  class="org-left" />

<col  class="org-left" />

<col  class="org-left" />
</colgroup>
<thead>
<tr>
<th scope="col" class="org-left">تسلسل</th>
<th scope="col" class="org-left">المادة</th>
<th scope="col" class="org-left">العدد</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">١</td>
<td class="org-left">طحين</td>
<td class="org-left">٥ كيلوغرام</td>
</tr>

<tr>
<td class="org-left">٢</td>
<td class="org-left">رز</td>
<td class="org-left">٣ كيلوغرام</td>
</tr>

<tr>
<td class="org-left">٣</td>
<td class="org-left">بطيخ</td>
<td class="org-left">٢ كيلوغرام</td>
</tr>

<tr>
<td class="org-left">٤</td>
<td class="org-left">قرنابيط</td>
<td class="org-left">٢ كيلوغرام</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="author">تأليف: اسم المؤلف</p>
<p class="date">Created: 2016-04-08 Fri 10:52</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
</html>

Output
enter image description here

Now everything was exported as expected except for the direction! If I want to change direction from INSIDE the generated html file, I have to change one line (marked in the code above) to this:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" xml:lang="ar", dir="rtl"><!-- change here -->

Now when I hit C-c C-v from inside the edited html buffer, it will be correctly displayed in browser from right to left. So it seems that all I need is to tell org-mode to export this little parameter dir="rtl" and everything will be just fine.

Output -- the desired one
enter image description here

In org manual, I found #+ATTR_HTML: but my trial of #+ATTR_HTML: :dir rtl was unsuccessful, my question to org-mode users how to export this html parameter from org buffer correctly?

Update

as amitp pointed out, this is my best solution for time being just put this in th org mode file:

#+HTML: <style> body {direction: rtl} </style>
1

Looking at the source file ox-html.el, the function org-html-template does not seem to allow customizing the <html...> or <body> tags in the export. :( However, there's also a CSS property direction:rtl that you could use, since org-mode lets you change the CSS by setting

(setq org-html-head "<style> <![CDATA[ body { direction: rtl; } ]]> </style>")

I am not sure if CDATA should be there; the org-html-head docstring shows it in the example. Alternatively, try it without:

(setq org-html-head "<style> body { direction: rtl; } </style>")
  • thanks! this worked when I tried the one without CDATA. What I need is to change direction from within the .org file and not from the dot emacs file globally. Moreover, sometimes I write rtl and then ltr in the same buffer so would be useful if the solution can be extended to enable direction change back and forth within the org buffer. – doctorate Jul 11 '16 at 18:33
  • For that I think you can write #+begin_html#+end_html somewhere in the org file, with <style> body { direction: rtl; } </style> inside. – amitp Jul 11 '16 at 21:12
  • thanks, this works now from inside org file, I found that #+HTML: <style> body { direction: rtl; } </style> works too. But still changing direction back and forth in the document remains a mystery to me. – doctorate Jul 12 '16 at 5:57
  • In theory, you can use the CSS to apply to any portion of the document by using a CSS selector other than body. In practice, org export makes this a bit harder because the html elements it generates don't have IDs. If you're working with paragraphs/lists as a whole you could try #HTML: <div style="direction:rtl"> before the paragraph, then #HTML: </div> after. (I haven't tried this) It's harder if you want rtl only on some span of text. – amitp Jul 12 '16 at 16:13
0

Your syntax seems to be wrong. Instead of #+ATTR_HTML: :dir:rtl try #+ATTR_HTML: :dir rtl, that should work.

  • I tried this one before and it didn't work, but your answer made me doubtful of my trial, I tried it then once more but to no avail! sorry that didn't work with me, am I missing something? – doctorate Apr 8 '16 at 15:15
  • I updated the post to reflect my point; that #+ATTR_HTML: :dir rtl didn't work. – doctorate Apr 8 '16 at 15:17
  • 1
    @doctorate: My fault, ATTR_HTML is only meant for links and tables. – CantrianBear Apr 8 '16 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.