What is the best way to use jQuery to align text when the language is not English?

I have a variety of HTML cards with different text languages. I want to dynamically align the text inside the cards based on the language - if the card title is in Urdu or Arabic, I want the text to be aligned right. If the card title is in English, then I want to set it to align left.

Is there a way to achieve this using jQuery or JavaScript? I'm seeking a solution and would appreciate any assistance.

$(document).ready(function() {
  if (language === 'ur') {
    $('.title').css('text-align', 'right');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hpanel blog-box">
  <div class="title">
    <h4>اسلام آباد: پاکستان ٹیلی کمیونکیشن اتھارٹی (پی ٹی اے) نے اسلام آباد ہائیکورٹ کو آگاہ کیا ہے کہ اس</h4>
  </div>
</div>

<div class="hpanel blog-box">
  <div class="title">
    <h4>I'm not entirely sure what's going on, especially as the value in the dictionary has been updated.</h4>
  </div>
</div>

javascripthtmljquerycss

Answer №1

To display text in Urdu or Arabic language, you can use the dir attribute set to RTL (Right To Left) like this:

<div dir = "RTL">
   <!-- Your Urdu/Arabic text goes here -->
</div>

Take a look at this example on JSFiddle and also visit this link for more information

Answer №2

To determine the direction of text alignment, you can check the first character of a string. If the first character is in English, then switch the direction to left. One way to achieve this is by using regex to identify the first character.

While this method may not be foolproof, it can still be helpful in certain cases.

$(".blog-box .title").filter((i, ele) => {
  return $("h4", ele).text().trim().match(/^[A-Za-z0-9]/);
}).css({
  'text-align': 'left',
  'direction': 'ltr'
})
.blog-box .title {
  text-align: right;
  direction: rtl;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hpanel blog-box">
  <div class="title">
    <h4>اسلام آباد: پاکستان ٹیلی کمیونکیشن اتھارٹی (پی ٹی اے) نے اسلام آباد ہائیکورٹ کو آگاہ کیا ہے کہ اس</h4>
  </div>
</div>
<div class="hpanel blog-box">
  <div class="title">
    <h4>I'm not entirely sure what's going on, especially as the value in the dictionary has been updated.</h4>
  </div>
</div>

Answer №3

$(document).ready(function() {
  if (language === 'urdu') {
    $('.heading').css('text-align', 'right');
    $('.heading').css('direction', 'rtl');
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

javascriptjqueryhtmlcsscarousel

When attempting to decrypt with a password using CryptoJS, AES decryption returns an empty result

Example The code snippet below is what I am currently using: <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script> <div id="decrypted">Please wait...</div> Insert new note:<input type="te ...

javascriptencryptioncryptographycryptojs

Retrieve initial elements from an array with the help of Node.js or JavaScript

let array = [[`animal`,`carnivours`], [`cow`,`milk`], [`plant`,`small`], [`fish`,`tank`]] console.log(array[0]); It seems that when trying to retrieve the first value from an array, we typically use array[0] to access all the first elements in the a ...

javascriptnode.jsarraysobject

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

javascripthtmljquerycss

"Implementing Line Breaks in ASP.NET Core: A Step-by-Step

Is there a way to show HTML text with line breaks preserved? public void OnGet() { ViewData["Msg"] = "Hello World \n Hello World \n Hello World \n Hello World"; } The text above has embedded line feeds. @page @model ...

c#htmlasp.net-corebootstrap-4asp.net-core-mvc

Checking a box to submit a form and seeing the results appear in a designated section

I'm working on creating a form that automatically submits when a checkbox is checked, and then displays the results in a specific div on the same page. Here's the code I've been experimenting with, but so far it's not working as expect ...

phpformsjquerycheckbox

No more CSS/JS code left standing after combining Flask with Ajax

This question is being opened to address a problem that arose from a previous query found here: Dynamically update HTML images from Flask+Ajax. To summarize, I needed to refresh my HTML view after receiving a response via AJAX from a Flask endpoint. HTML ...

htmljquerycssajax

Having trouble with ReactJS rendering components?

FriendList.js var React = require('react'); var Friend = require('./friend.js'); var FriendList = React.createClass({ render: function() { return( <div> <h3& ...

javascriptreactjs

Cannot locate module using absolute paths in React Native with Typescript

I recently initiated a new project and am currently in the process of setting up an absolute path by referencing this informative article: https://medium.com/geekculture/making-life-easier-with-... Despite closely following the steps outlined, I'm en ...

javascriptreactjstypescriptreact-nativeimport

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

javascripthtmlangularjs

Displaying a multitude of files in a Google Cloud bucket

I am currently utilizing a Node.js script to retrieve the number of files stored in a bucket on Google Cloud Storage. Interestingly, when dealing with a bucket containing approximately 30K files, the script executes successfully within a few seconds. Howe ...

javascriptnode.jsgoogle-app-enginegoogle-cloud-platformgoogle-cloud-storage

ReactJs: Tweaking Padding in Material-UI Table

After inheriting this fullstack app, I noticed that the original developers had incorporated a component to generate tables for the webpage. However, there is an issue with the padding on all the cells being too large. Through Chrome developer tools, I di ...

javascriptmaterial-uimaterial-table

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss

Enable real-time prevention of the onKeyUp function

I am currently working on implementing a Facebook-like link share preview feature. An example of what I'm aiming for is something like this: Most parts are functioning properly except for a few minor issues. The link share preview is activated when a ...

jqueryajaxonkeyup

Looking for a Helper Function to Convert Lengths from WebGL / Three.js to Pixels

I'm trying to understand how WebGL / Three.js determines the heights and widths of objects. What numerical systems are used to set x, y, z coordinates? For example, when the arrow is pointing straight up with Y set to 1, it appears as 15-200 pixels. ...

javascriptthree.jswebgl

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

htmlcssoverlay

Developing a library for Phaser.io using WebPack - Error message: Class extending an undefined value is neither a constructor nor null

I am currently working on developing a compact FOSS UI component library specifically for the Phaser.io game engine. The code repository can be found here. All the components are stored in the src/ directory and are exported through the index.js file. Thes ...

javascriptnpmwebpackphaser-framework

Inject Angularjs Controller into Module Once DOM is Initialized: Tips and Tricks

When injecting new DOM elements with a controller, I encountered the following issue: app.controller('cart', function ($scope, $http) { $scope.content = { label: "hello, world!", }; }); var $html = '<div ng-controller="c ...

javascriptjqueryangularjs

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

I am looking to implement a unique grid image slider that accommodates images of varying heights and widths. I envision something similar to the example shown below. The image showcases a pattern where the sliders alternate between square images and two r ...

jquerycssreactjsslick.jsowl-carousel