I'm having some trouble changing the direction of a tag inside another tag. It's not working correctly for me.
In the example below, I want to see aslami @ exactly as I have written it, but the result is showing @ before a instead of after i.
<p style="width: 100%; direction: rtl; text-align: right;">
مهدی
<em style="direction: ltr; text-align: left;">aslami @</em>
خاوری
</p>To achieve the desired effect, remember to include unicode-bidi:isolate;reference
<p style="width: 100%; direction: rtl; text-align: right;">
مهدی
<em style="direction: ltr;unicode-bidi:isolate; text-align: left;">aslami @</em>
خاوری
</p>Furthermore, it is advisable to use the dir attribute rather than direction, as specified.
It is recommended for HTML authors to rely on the HTML dir attribute and
<bdo>element in order to ensure accurate bidirectional layout even when CSS styling is disabled. Avoid usingdirectionwithin HTML documents.
Note that there exists a subtle distinction between dir and direction.
Regarding direction:
ltr
This property establishes inline base direction (bidi directionality) from left-to-right within the line. reference
For dir:
The ltr keyword corresponds to the ltr state
Indicates explicit directional isolation for left-to-right text content within the element. reference
Therefore, utilizing dir=ltr equals
direction: ltr;unicode-bidi:isolate;direction: ltr;
Refer to the response provided by @Ori Drori
Consider employing the bdi tag for similar outcomes:
<p style="width: 100%; direction: rtl; text-align: right;">
مهدی
<bdi><em style="direction: ltr; text-align: left;">aslami @</em></bdi>
خاوری
</p>The bdi element isolates text from its surroundings to facilitate proper bidirectional text formatting reference
The direction property in css is primarily used to establish layout direction, as demonstrated in the first example on the provided link. To define text direction, utilize the html dir attribute:
<p dir="rtl" style="direction: rtl;">
مهدی
<em dir="ltr">aslami @</em>
خاوری
</p>If you want to make your code more concise, you can simply utilize the dir attribute on your HTML tag. Here's an example:
<p dir="rtl" style="width: 100%; text-align: right;">
مهدی<em dir="ltr">aslami @</em>خاوری
</p>`
Is there a way to save a jquery variable in a json file? I have the following: var image='/test/test.png'; I am obtaining this path through file upload: <input type="file" name="imageurl" value="imagefile"></input> Therefore, I ne ...
I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...
When creating a webpage, I included a META tag like this: <META http-equiv="refresh" content="5;URL=http://www.google.com"> The issue is that mobile browsers do not support this meta tag. It redirects properly on web browsers, but not on mobile dev ...
Recently, I purchased Moltran, but encountered a major issue: The notification menu disappears on mobile devices, which is not ideal for me. After some research, I discovered that removing the hidden-xs class from the li notification element can solve this ...
HTML: <ul class="tabs"> <li><a href="#tab-one" class="current">Residential</a></li> <li><a href="#tab-two">Commercial</a></li> <li><a href="#tab-three">Agricultural</a></li> < ...
Our website utilizes CSS classes to display icons across various pages. .alert { /* used for "alert" type messages */ background: url(images/alerts.png) no-repeat left top; padding: 5px 0 15px 35px; margin: 0; } Use: <p id="ctl00_ctl00_ContentMessagePa ...
In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...
I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...
I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...
My issue involves a div with the :active selector effect. Within this div, there is a smaller child div that contains some buttons. Currently, when either the parent div or one of the buttons within the child div is clicked, the :active effect is triggere ...
I am faced with a situation where I have multiple batches of code structured like this: 1 <div id="backgrounds" class="centery">Backgrounds 2 <div id="bk1" class="attr">Background 1 3 <div class="container"> 4 ...
I am currently utilizing intro.js to create a virtual 'tour' for my website. As I aim to provide a highly interactive experience for users, I have enabled the ability for them to engage with highlighted DOM elements at different points in the tou ...
I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...
I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...
I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling. Below is the code snippet I am working with: .sticky { position: sticky; top: 0; } #i ul { list-style-type: ...
I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...
Could you help me change the tag that currently displays true or false? I want it to show "FREE" if the event is free and "PAID" if it's not. Check out the Eventbrite API here The response I'm receiving from data.events.is_free is in boolean fo ...
As I follow a tutorial to extract answers from a Quora URL, my code is set up like this url = 'https://www.quora.com/Should-I-move-to-London' r = requests.get(url) soup = BeautifulSoup(r.content, 'html.parser') answers = soup.find(" ...
I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...
Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...