RTL+form fields

This is to test RTL functionality of form fields

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <p>
        Note: This page uses JQuery. Enable scripts when you are running this page from local machine. <br /><br /><br />
        Some articles related to Right To Left(RTL) text alignment: <br />

        https://www.w3.org/International/tests/repo/results/bidi-text-rendering#dirauto-input-basic <br />
        https://www.w3.org/International/questions/qa-html-dir <br />
        http://www.i18nguy.com/markup/right-to-left.html <br />
        http://stackoverflow.com/questions/7524855/right-to-left-text-html-input <br />
    </p>

    <label for="setRTL"><input type="checkbox" id="setRTL" /> Apply RTL on individual fields</label> <br />
    <label for="setRTLTable"><input type="checkbox" id="setRTLTable" /> Apply RTL on Table</label> <br />
    <label for="setRTLForm"><input type="checkbox" id="setRTLForm" /> Apply RTL on Form</label> <br />
    <hr />

    <form>
        <table>
            <tr>
                <td>Readonly field 1</td>
                <td><div class="rtl readonly">Some text!</div></td>
            </tr>
            <tr>
                <td>Readonly field 2</td>
                <td><span class="rtl readonly">Some text!</span></td>
            </tr>
            <tr>
                <td>Simple textbox (input type text)</td>
                <td><input type="text" value="some text" class="rtl" /></td>
            </tr>
            <tr>
                <td>Email (input type email)</td>
                <td><input type="email" value="[email protected]" class="rtl" /></td>
            </tr>
            <tr>
                <td>Dropdown list</td>
                <td><select name="country" class="rtl">
                    <option value="India">India</option>
                    <option value="US">USA</option>
                    <option value="UK">UK</option>
                </select></td>
            </tr>
            <tr>
                <td>Radio buttons</td>
                <td>
      ...

CSS

input, select, textarea, button, label {
  width: 300px;
  /*direction: rtl;*/
}
input[type=radio], input[type=checkbox]{
  width: auto;
}
.applyRTL {
  direction: rtl;
}
.readonly {
  border: 1px solid black;
}

JavaScript

$(function () {
  $("#setRTL").click(function () {
    if ($(this).prop("checked")) {
      $(".rtl").addClass("applyRTL");
    } else {
      $(".rtl").removeClass("applyRTL");
    }
  });
  $("#setRTLTable").click(function () {
    if ($(this).prop("checked")) {
      $("table").addClass("applyRTL");
    } else {
      $("table").removeClass("applyRTL");
    }
  });
  $("#setRTLForm").click(function () {
    if ($(this).prop("checked")) {
      $("form").addClass("applyRTL");
    } else {
      $("form").removeClass("applyRTL");
    }
  });
});