Arabic and Latin letters become intertwined

I am currently working on implementing an Arabic version of our website without affecting the other languages. The goal is to keep the changes to the markup minimal.

Here is the English version:

<div class="location_description"> <span itemscope itemtype="http://schema.org/AdministrativeArea">
<span class="glyph featcl_T"></span>
<span itemprop="name">Canton of Obwalden</span>,</span>
<span class="coords" itemprop="geo" itemtype="http://schema.org/GeoCoordinates">46.77°N 8.43°E 3238m asl
    <meta itemprop="elevation" content="3238">
    <a target="_blank" title="Geonames" href="http://www.geonames.org/2658357"><span class="glyph edit">
</span>
    </a>
    <meta itemprop="latitude" content="46.77">
    <meta itemprop="longitude" content="8.43">
    </span>
</div>

"Canton of Obwalden" is pulled from a database and can be translated into Arabic or any other language. However, when our translator attempted to translate "N", "E", and "m asl", it resulted in a confusing jumble... http://jsfiddle.net/stby04/xzj5czb5/

How can I ensure that the content displays correctly for all language combinations?

htmlcss

Answer №1

To ensure right-to-left text display, be sure to include dir="rtl" in all appropriate tags.

div class="arabic">
    <div class="location_description"> <span dir="rtl" itemscope="" itemtype="http://schema.org/AdministrativeArea">

                            <span dir="rtl" class="glyph featcl_T"></span>
 <span dir="rtl" class="arabic" itemprop="name">Kanton Obwalden</span>,</span> <span class="arabic" itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">46.77°ش 8.43°ق 3238متر فوق سطح البحر<meta itemprop="elevation" content="3238"><a target="_blank" title="Geonames" href="http://www.geonames.org/2658357"><span class="glyph edit"></span>
        </a>
        <meta itemprop="latitude" content="46.77">
        <meta itemprop="longitude" content="8.43">
        </span>
    </div>
</div>

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

Encountering issues with calling a custom directive within another custom directive in AngularJS

I need to implement a custom directive within the template of another custom directive. Here are the code snippets for reference: Issue with Scenario 1 angular.module('myApp') .directive('customOnChange', function () { return { r ...

htmlangularjsangularjs-directive

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

Learn how to create a PHP activity feed that functions like Facebook, and discover the best methods for converting JSON responses into HTML

We are currently working on a website that functions similarly to Facebook, specifically focusing on the activity feed. To load the user's activity feed, we use AJAX to send a request to a PHP file which then processes the logic and returns the values ...

phpfacebookjsonhtmlfeed

Retrieve a property from a designated element within the DOM

Is there a way to specifically extract the src attribute of the second image in an HTML file using PHP DOM parser? foreach($html->find('img[src]') as $element) $src = $element->getAttribute('src'); echo $src; I s ...

phphtmlparsing

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...

javascriptjqueryhtmlangularjs

Ensure that bulleted lists and numbered lists are aligned to the left side

Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...

css

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

I am currently working on an application that utilizes a component called "dropdown-component" throughout its pages. However, due to specific business requirements, I have been tasked with replacing "dropdown-component" with "custom-dropdown-component". Un ...

htmlangulartypescript

Discovering the destination URL that an HTML button submits to

While attempting to scrape data from instacart.com, I encountered the requirement of entering a zip code to determine the displayed information. My intention is to utilize Python requests to submit a random zip code. However, I am unsure of which URL to po ...

htmlformsseleniumpython-requests

Encountering issues with the phaser framework while setting up a server on xampp, faced with errors in javascript and html

Recently, I've been working on a game using Phaser and encountered some issues while trying to run the code in XAMPP. The game's base is located at htdocs/itw/test.html, with the necessary pngs and json file stored in htdocs/itw/assets/. The pngs ...

javascripthtmlxamppphaser-framework

I have been attempting to extract real estate listings from an MLS website using Beautiful Soup and have found some success. I am now considering if using Selenium would be a more efficient option

Perhaps this question has been answered before, which could help guide me in the right direction. The website loads 24 listings at a time and then displays a "see more results" button to load the next batch of 24 listings while keeping the initial 24 visib ...

htmlseleniumweb-scrapingbeautifulsoup

Prompting the website to 'refresh' and return to the beginning of the page

My website's functionality is closely tied to the user's position on the page. Different features are triggered once specific distances are reached. I am seeking a way for users to automatically return to the top of the page upon page reload. Cu ...

javascriptjqueryhtml

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

javascripthtmlnode.jsejs

In IE8, CSS classes assigned to HTML5 elements are removed when they are printed

Currently, I am facing a challenge where I need to ensure proper printing functionality in IE8. The issue arises when using HTML5 features (such as sections) along with CSS on a page - the problem occurs specifically during printing. For example, when tryi ...

csshtmlprintinginternet-explorer-8preview

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...

htmlcsstemplatesdrop-down-menusubmenu

PHP loaded HTML does not allow JavaScript to execute

My system includes an announcements feature where all announcements are retrieved from a database and displayed on the screen using Ajax and PHP. Below is the code snippet used to load each announcement onto the page: echo '<div id="announcements ...

javascriptphpjqueryhtmlajax

Learning how to implement the selection tag to upload data to a SQL database using PHP

As a coding beginner, I've been tackling a project involving data insertion into an SQL server with PHP. My current struggle lies in the process of inserting data and capturing select tag objects as variables. I keep encountering Undefined Index error ...

phphtmlsqlwampserver

Unable to open fancybox from a skel-layer menu

Seeking assistance with integrating a Fancybox inline content call from a Skel-layer menu (using the theme found at ) <nav id="nav"> <ul> <li><a href="#about1" class="fancybox fancybox.inline button small fit" >about< ...

javascriptphpjqueryhtmlfancybox

jQuery Files in Conflict

The issue I am facing involves the code below. The first function requires linked js and css, while the second one needs a jQuery and javascript file inherited from base.html. However, there seems to be a conflict in loading these files (possibly because o ...

javascriptjqueryhtmldjango

What is the best way to eliminate the final character in an input value once it has passed through regex validation in Angular8

Hello! I am attempting to remove the last digit of a string and update the input value each time my function checks if the input value passes a regex test on keypress. Initially, it works correctly, but then it adds an extra digit. After that, it works a ...

htmlangulartypescript

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...

javascripthtmlcss