When using the 'rtl' direction in Dojo Text, all special characters are aligned to the right

I'm having an issue with keeping the text of a button centered followed by an icon. The code works fine until I add special characters in front of the button text. In that case, the special characters are placed after the text followed by the icon.

I suspect that this issue is related to the dir:'rtl' property I am using. However, I need this property to position my icon on the right side of the text.

Any help or opinions on this matter would be greatly appreciated.

Here is what my code and CSS look like:

<button data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="OpenButton" data-dojo-props="'class':'ButtonStandard',dir:'rtl', iconClass:'ButtonArrowRight'">None</button>

My CSS is as follows:

.ButtonStandard {
  width: auto;
  margin-bottom: 2px;
  padding: 0px;
}


.ButtonArrowRight {
  background-image: url("images/ArrowRight.png");
  background-position: 0 53%;
  background-repeat: no-repeat;
  width: 12px;
  height: 12px;
}

Thank you

Answer №1

When you set the writing direction to rtl, you are indicating that the text should flow from right to left. This can cause certain special characters to appear on the right, even after left-to-right characters. It is important to only use this direction when the majority of the text content is in a right-to-left language like Arabic or Hebrew.

If you want to position an image to the right of text, there are various ways to do so. The most straightforward method is to insert an image using the img element after the text. Another option is to use a background image positioned on the right side of an element. Regardless, this is a separate issue from setting the writing direction and unnecessarily complicates the process.

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

What is the best way to transmit a collection of JSON documents from the server?

Need help with vue.js code. It's not working as intended, any suggestions? Below is the code snippet: mounted(){ fetch('/', { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, ...

Tips for deleting multiple objects from an array in angular version 13

I am facing an issue where I am trying to delete multiple objects from an array by selecting the checkbox on a table row. However, I am only able to delete one item at a time. How can I resolve this problem and successfully delete multiple selected objects ...

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

Vue.js Applications tend to encounter Expected Errors originating from JavaScript

I've been diving into learning Vue.js using Visual Studio 2017. Currently, my goal is to create applications with multiple buttons that trigger the display of a message upon being clicked. However, when I attempt to run this code, I encounter the foll ...

Error: Mongoose Schema Undefined when Route is Added in Separate File

For the sake of organizing my code, I made the decision to separate all of my schemas and routes into different files within my directory, and then required them in my app.js. Each schema corresponds with each route. This method has worked for all but one ...

difficulty with content insertion in asp/css/html

Hi everyone, I seem to be experiencing an issue with my content placeholder: Even though my content is supposed to be inside the placeholder in my ASP code, it appears outside: <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"& ...

Preserving the selected date in a textbox using jQuery DatePicker after a postback

How to Save DatePicker Date in a Textbox after a Postback $(function () { $("#Arrival").datepicker({ minDate: 0, dateFormat: 'dd/mm/yy', showOn: "button", buttonImage: "img/ui_cal_icon.gif", buttonIm ...

Issues with the functionality of the jQuery notify plugin are being encountered when used in a

I am currently utilizing the jQuery notify plugin and have included all the necessary JS files in the header. However, whenever I attempt to call the $.notify function in another JS file that also involves AJAX, I encounter difficulty accessing the $.notif ...

Is your PHP random advertisement feature malfunctioning?

<div id="bannerAd"> <?php //THIS SCRIPT RANDOMLY SELECTS AN AD. $randomAd = rand(1,3); switch($randomAd) { case "1": $adLink = "/sale.php"; $imageFile = "/images/saleAd.png"; ...

The implementation of a Like Button in Django using JS and DOM resulted in a 404 error

I am facing an issue with the 'live' like/unlike button functionality in Django and JavaScript DOM Upon clicking the button, an error is triggered POST http://127.0.0.1:8000/like/24 404 (Not Found) likePost @ javascripts.js:24 (anonymous) @ java ...

Styling for a table with one column set to a fixed width, one column designated as small, and the rest of the

Creating a table with fixed width first column, text-contracting second column, and equally splitting remaining space for the rest seems to be a challenge. Check out this fiddle for my current attempt: http://jsfiddle.net/B8LnP/ Two key issues to observe ...

Customize Vuetify styling by using a .less file for overrides

Currently, I am working on developing an application using Vue and Vuetify as the foundation. I have found Vuetify to be extremely useful in quickly creating new features and prototypes. However, I am facing a challenge in aligning the styling of the app w ...

Changing the color of MUI Typography when selected

Struggling to modify the styling of the Typography component nested inside a MenuItem. Unable to apply styles to ListItem as intended Check out my code here: https://codesandbox.io/s/dztbc?file=/demo.tsx:1481-1804 Desired behavior: Change styling on sele ...

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

Database-Driven Ajax Information Display

https://i.sstatic.net/GE8RI.pngI retrieved some data from the database and successfully displayed it after an ajax call. However, one of the variables contains array data that was saved using the implode function. The data looks like (a,b,c,d). The curren ...

Selecting the label "for" will activate both the anchor tag and input tag simultaneously

It seems like I'm having trouble making this work, and it appears to not be possible. That's why I'm reaching out for help... Here is the CSS that is being used: label.btn { cursor:pointer; display:inline-block; } label.btn>inpu ...

Tips for capturing and storing video with HTML5 WebRTC

Before reading the description, make sure to run the code snippet first. This will provide you with a better understanding of the structure. In the 2nd video element, I am trying to record, play, and save video. The issue I'm encountering is that the ...

Using jQuery's .html() method will remove the selected attribute from the dropdown menu option

When generating HTML dynamically, a select element is included. After choosing an option inside it, everything works fine. For example: <div id="test"> <select> <option value="1">1</option> <option value="2" selec ...

Is it possible to maintain tab focus instead of visual focus when navigating past the skip navigation menu for improved accessibility?

My website features an accessibility skip navigation menu that utilizes named anchors to navigate to different content areas. These content areas, including the top menu, left menu, main body content, and footer menus, contain links within them. When I u ...

Error: Angular7 Unable to locate namespace 'google'

I am currently utilizing the import { MapsAPILoader } from '@agm/core'; package to enable auto-complete address search functionality. However, I have encountered an error message stating cannot find namespace 'google'. The error occu ...