Repository files navigation

bidiweb.style(query)

bidiweb.style('.content *');

bidiweb.style('.container *')

bidiweb.css('.container *')

h3.title.rtl {    text-align: left;}

It should be noted thatbidiweb.style,bidiweb.css, andbidiweb.process also accept a node list as an argument instead of a query.

A node list is what you get when you callDOMNode.querySelectorAll('.content *').

You can also pass in a single node directly. This is useful for automatically adjusting the directionality of form elements. For example, you can listen to 'input' events on aninput ortextarea elements and callbidiweb.style(field) as a response to changing user input. This will cause the input element to automatically adjust it's directionality based on its content (value actually).

Sometimes it's handy to be able to fix the direction of elements in a plain-text html string. The most obvious use-case for this is processing the html string generated by a markdown parser. You could in theory render the resulting string to the DOM and then call the css or style function on the inserted node afterwards. This however creates a suboptimal user experience, where the element appears LTR for a split second before turning to RTL.

A much better user experience would be to process the resulting htmlbefore inserting it to the DOM.

To achieve this effect, you can usebidiweb.html_css andbidiweb.html_style, which take as input an html-string, and return a string reprsenting the processed html.

Here's a function that uses Pagedown.js to sanitize and parse markdown, then uses bidiweb to automatically adjust RTL sections:

/**    Parse markdown with a sanitizer and a bidi processor */markdown2html = function(text) {    var converter = Markdown.getSanitizingConverter();    var html = converter.makeHtml(text);    return bidiweb.html_css(html);}

Note that this function returns a string, not DOM nodes.

• Supports AMD via requirejs (optional)
• Does not depend on jQuery or any other library.
• Not tested on IE and not developed for it. If it works on IE, it's by accident.

bidi_helpers.js is licensed under the Apache license.bidiweb.js is licensed under the WTFPL.

See example.html

Include "bidiweb.build.js"

require bidiweb, and make sure bidi_helpers is available (bidiweb will require it).