How do I set RTL direction aka "Arabic support" (bidirectional) on text elements?

  • Has it is described in W3C documentation and supported in HTML css definition with "direction:rtl"

    w3.org/International/questions/qa-html-dir

    We need support in construct 3 text object for Arabic Right to left bidirectional direction.

    What is the way to integrate it on a text object or all text elements?

    I know that setting "dir='rtl'" on a canvas should do the trick, but since construct generate the canvas dynamicly, i'm not sure how to do it!

    Thanks

    Tagged:

  • Any hint on this Ashley?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Ok! I have found a solution using HTML Textarea and CSS stylesheet instead of Canvas text element.

    First step: Create a styles.css stylesheet in the "Files" folder of your project with the following styles:

    (examples)

    (For now the direction:rtl is set to all, as a test)

    	textarea
    {
    	-moz-user-select: none;
    	-khtml-user-select: none;
    	-webkit-user-select: none;
    	-ms-user-select: none;
    	-webkit-touch-callout: none;
    	color: white;
    	user-select: none;
    	font-weight: 900;
    	background-color: transparent;
    	border: 0;
    	font-family: 'OpenSans-ExtraBold';
    	text-shadow: -1px -1px 2px #000000, 1px 1px 2px #000000;
    	overflow: hidden;
    	direction: rtl;
    	
    }
    textarea:focus { 
    	outline: none; 
    	cursor: default;
    }
    

    Second Step: Insert the styles.css in the head of the exported index.html file by adding the following JS script on start of layout:

    	"
    var nameScript = 'styles.css';
    
    //C2 Runtime
    if (typeof this.runtime !== 'undefined'){
    	nameScript = this.runtime.getProjectFileUrl(nameScript);
    }
    //C3 Runtime
    if (typeof this._runtime !== 'undefined'){
    	nameScript = this._runtime.GetAssetManager().GetProjectFileUrl(nameScript);
    }
    
    var ss = document.createElement('link');
    ss.type = 'text/css';
    ss.rel = 'stylesheet';
    ss.href = nameScript;
    document.getElementsByTagName('head')[0].appendChild(ss);
    "
    

    Third step: Create the textareas with text set at auto-resize.

    Fourth step: Add logic that would set the direction RTL only for "ar-me" text.

    I will post my solution on this soon...

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)