example.html

﻿<!doctype html>
<html>
    <head>
        <title>autobidi test</title>
        <script type="text/javascript" src="bidiweb.build.js"> </script>
        <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            bidiweb.process_css('.content > *', {rtl: 'rtl', ltr: 'ltr'});
            bidiweb.process_style(".direct");
        });
        </script>
        <style type="text/css">
        @import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
        @import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
        /* @import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css); */

        h1 {
            font-family: Amiri, Georgia;
            color: #333;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 24pt;
        }

        p, .p {
            background-color: hsl(120, 50%, 90%);
            color: #333;
            padding: 6px 12px;
            border-radius: 6px;
            font-family: 'Droid Arabic Kufi', sans-serif;
        }
        div {
            width: 500px;
            margin: 20px auto;
            border: 1px solid silver;
            padding: 12px 20px;
        }

        .ltr {
            text-align: left;
            direction: ltr;
            background-color: hsl(0, 50%, 90%);
        }

        .rtl {
            text-align: right;
            direction: rtl;
            background-color: hsl(200, 50%, 90%);
        }
        </style>

    </head>
    <body>
        <div class="content">
            <h1> Heading </h1>
            <h1> عنوان </h1>
        </div>

        <div class="content">
            <p> This is an english paragraph </p>
            <p> هذه فقرة عربية </p>
            <p> git هو نظام سورس كونترول. لاحظ ان هذه فقرة عربية مع انها تبدأ بكلمة انكليزية</p>
            <p> ع is a letter that doesn't exist in english. Note how this is an english paragraph even though it starts with an arabic letter </p>
            <p>זהו טקסט לדוגמה עברית</p>
        </div>

        <div>
            <p class="direct">معالجة عنصر مباشرة</p>
            <p class="direct">inline style processing</p>
        </div>

        <span style="direction: rtl">
            <div class="content">
                <p>هذا الجزء من اليمين الى اليسار باي ديفولت</p>
                <p>By default, this container is RTL</p>
                <p>これは日本語の文です。</p>
                <p>이것은 한국의 문장입니다.</p>
            </div>
        </span>
    </body>
</html>