Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Bidi TextEntry (gallery-bidi-textinput) on cdn

Last Updated: 09/28/10

+ 1 -

Roozbeh Pournader

YUI Contributor

See 2 more by this user.

Created: 06/11/10
Last CDN Push: 09/22/10
Build Tag: gallery-2010.09.22-20-15
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0
Free for use.

This module provides a YUI plugin that could be added to input boxes and small textareas, so that when a user types Arabic or Hebrew text inside a left-to-right text input box, the direction would automatically switch to right-to-left. This is required in order to make bidirectional text readable.

Since this plugin uses gallery-node-setdir, a "directionChange" event would be fired anytime the direction of the text input box changes.

Notes:

The module requires YUI 3.2.0.

And old version of the module had the plugin named BidiTextInput. I have changed that to BidiTextEntry to hint that . Y.Plugin.BidiTextInput is still provided as an alias, but the name and namespace for the plugin has changed to BidiTextEntry.

Text areas don't support different directions for different lines, so it's not recommended to use them for bidi content unless in very limited small cases. This module supports setting the direction of text areas just like input boxes, but we do not recommend using it with text areas. Instead, switch to YUI3's Rich Text Editor and use its editor-bidi plugin.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

The following code sample creates an input box, plugs in the functionality, and watches the event fired when the direction changes based on user input.

Code Sample

<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.09.22-20-15'
}).use("gallery-bidi-textinput", "node-pluginhost", function(Y) {
    Y.one("html").append("<input style='position:absolute;width:40%;left:10%' type='text' class='autobidi'>");
 
    Y.all("input.autobidi").plug(Y.Plugin.BidiTextEntry);
 
    Y.on("directionChange", function (e) {
        Y.log('bidi: direction switch happened. dir:'+e.dir+', target:'+e.target);
    });
});