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>`
I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...
Just starting out with Gatsby/React and web development in general, so apologies if this is an easy fix. I'm facing an issue that I can't seem to solve. Currently, I'm working on my website's header and trying to create links to naviga ...
I've hit a roadblock with this issue. I'm attempting to add a custom font to my project. The CSS file can be found in the directory project/css/. The font is located at project/fonts/iconfont/. In that folder, I have the following font files (alt ...
Having trouble with a script in my demo below. When I enter "first input", submit, then click on the returned "first input", it alerts once as intended. However, upon refresh, if I enter "first input", submit, then add "second input", submit, and finally c ...
[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...
Currently utilizing an open-source code to fetch Google reviews, but facing an issue with long reviews. They are messing up the layout of my site. I need to limit the characters displayed for each review and provide an option for users to read the full rev ...
<select id="ordersSelect" class="drop-down" onchange="somemethod()"> <c:forEach items="${orders}" var="order" varStatus="orderStatus"> <option value="${order.id}"> ${order.publicId} </option> </c:forEach> </select> ...
I've been approached to assist with a friend's company website since the original developer seems to have disappeared. Apologies if this question is too basic for this forum, and please forgive me if I am not in the right place to ask it. The m ...
This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...
Currently, I am working on two pages - the "Home-Page" and the "Landing-Page". My goal is to customize the content of the "Landing-Page" based on the button clicked on the previous page (which happens to be the "Home-Page"). Initially, I tried using ancho ...
Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...
I'm a newcomer to Angular and I'm trying to wrap my head around how it functions. For example, if I have a component named "login", how can I make Angular render it directly? When I try to replace the app-root tag with app-login in index.html, n ...
https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...
I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...
JSFIDDLE: http://jsfiddle.net/7zk1bbs2/ If you take a look at the JSFiddle project, you'll notice that the icons are placed inside an orange box. However, there is a vertical scroll needed to browse through them and I am attempting to enable horizont ...
I am new to ReactJS and I would like help on how to hide the watermark on a Google My Map. Can someone please assist me with this? <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1OMSkPKZi-U-CnmBr71zByNxp8HYi-vOc&ehbc=2E312F" fram ...
In my current setup, I have a div with the class "d-flex flex-column" that contains a navbar and a container. Within this container, there is another div with the class "d-flex flex-column" which then contains two rows. I am using flex-grow to make the con ...
Currently, I am attempting to create a component within a wrapped styled component. The Styled component has a circular shape, and I am seeking assistance in styling it accordingly. Can anyone provide guidance on how to apply the styles needed to achieve a ...
Trying to enhance my React abilities, I decided to follow this tutorial on creating a list of names using PokeAPI. However, I hit a roadblock at 11.35 into the tutorial while implementing the provided code snippets in both App.js and PokemonList.js: fu ...
I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...