When posting in Google Plus (and other platforms), I noticed that when I type in Persian, which is a right-to-left language, the text direction changes automatically to rtl and text-alignment:right. However, when I switch to English, the direction switches to ltr and text-alignment:left. How can I achieve this functionality? Is this related to HTML5 or Javascript? What steps should I take to implement this feature?
Thank you in advance.
Ensure your input elements have the attribute dir=auto:
By using dir="auto" on forms and inserted text, you can automatically determine the direction of the content provided at run-time.
https://www.w3.org/International/questions/qa-html-dir#quickanswer
There was a problem with the dir=auto attribute not always functioning correctly.
Upon further investigation into the CSS, I discovered
#container > * {
text-align: start;
unicode-bidi: plaintext;
}
It turned out to be a more adaptable and widely applicable solution
To achieve this functionality, I have created a custom code using JQuery. All you need to do is assign the class "checkRTL" to the specific element where you want to control the text direction.
var rtlCharacters = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
$(document).ready(function(){
$('.checkRTL').keyup(function(){
var containsRTL = this.value.match(rtlCharacters);
if(containsRTL !== null) {
this.style.direction = 'rtl';
} else {
this.style.direction = 'ltr';
}
});
});
You can also utilize Twitter's RTLtextarea library for additional support:
To determine the direction of your element, add the attribute dir="auto" and then use the JavaScript function
window.getComputedStyle(element).getPropertyValue('direction')Here is an example:
<div id="foo" dir="auto">نے والے ہیں۔<div>
// This will return 'rtl'
window.getComputedStyle(document.getElementById('foo')).getPropertyValue('direction')
window.getComputedStyle(document.getElementById('bar')).getPropertyValue('direction')<div class="" id="bar">
<div class="French">C'est un message de test</div>
<div class="German">Dies ist eine Testnachricht</div>
<div class="German-French">Test für Deutsch</div>
</div>In German, if the first sentence begins with a French word like the last div, the entire text is displayed in LTR mode
Alternatively, you can refer to this link:
I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...
I have a frontend application built with Angular and TypeScript where I need to make an HTTP request to an AWS API Gateway. The challenge is converting the existing JavaScript code into TypeScript and successfully sending the HTTP request. The AWS API gat ...
I currently have an Electron application in place. It utilizes Bootstrap v4, Electron v2, as well as other node modules. One concern I am facing is related to a button that triggers an Electron dialog box where users can select a folder. Upon selecting th ...
I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...
I am currently utilizing the Microsoft Translation Widget to automatically translate a webpage without requiring any user interaction. Unfortunately, I have been facing an issue where I am unable to remove or hide the widget that keeps popping up on the p ...
I am having an issue. I want to create a Vue.js Component. This component displays an image, similar to the <img> tag. If you are familiar with the <img> tag, this question should be easy for you to understand. Here is the code I have: props ...
Currently, I am developing a script that replaces ads. At times, advertisements show up inside of <td> tags like the following: <tr> <td align="right" width="40%"><a><img src="ad.jpg"></a></td> <td>123&l ...
The issue I am experiencing seems to be directly related to the jQuery $.ajax({...}); function. In PHP, when I print the array, I receive a Notice: Undefined index. I would greatly appreciate any advice or guidance on this matter. <script> $(docume ...
Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...
Delving into Vue JS has presented me with a challenge. I'm aiming to retrieve the value of the selected option. But unfortunately, I'm stuck. Despite my efforts to scour Google for answers, I have come up empty-handed. Below is a snippet of m ...
Trying to implement a unique Google Maps popup following the provided documentation. After copying and pasting the official Google example code into a VueJS jsFiddle, the custom marker functions correctly as intended. It remains in the designated area eve ...
Whenever I go on indeed.com using the firefox web driver in Marionette mode, I keep encountering an hCaptcha popup. In an attempt to avoid this, I experimented with a user script that alters the navigator.webdriver getter to return false right at the sta ...
I received assistance from a friend in creating this progress bar. Everything seems to be working well, except for the fact that the progress bar is not extending to the full width of the parent div. The new width after each input tag is entered using Java ...
I'm attempting to display the value of the selected OPTION in a separate INPUT FIELD, but for some reason it's not working and I can't figure out what's causing the issue. Here’s the code snippet: <!doctype html> <html lan ...
Wondering if this could be a bug in Photoshop. When scaling a layer and entering values of 100%, an error message pops up: var srcDoc = app.activeDocument; var numOfLayers = srcDoc.layers.length; // main loop for (var i = numOfLayers -1; i >= 0 ; i-- ...
I am currently working with an AJAX callback: Here is the HTML snippet: <a onCLick="loadXMLDoc(id1,id2)">(Add)</a> This function triggers an AJAX method that replaces the "(Add)" text with a basic HTML input field. Subsequently, when there ...
My current layout is as follows: export default function Layout(children:any) { return ( <div className={`${styles.FixedBody} bg-gray-200`}> <main className={styles.FixedMain}> <LoginButton /> { children } ...
Can math operations be done directly within an HTML element, such as <div width="50/2">, or is it necessary to use Javascript or CSS for this functionality? ...
One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...
Currently, I am attempting to utilize the resemblejs library () in order to compare two images. Despite creating a directory and adding resemblejs as a dependency, when running nodejs test.js, an error occurs: var api = resemble(fileData).onComplete(funct ...