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: [email protected]
#+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
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
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>
