Is there a way for me to keep the right-to-left text flowing into the section below it

I have come across a particularly lengthy Right-to-left arabic paragraph:

https://fiddle.jshell.net/09b6xoaa/4/

My expectation is that when the line becomes too long, it should continue on the left side below ("end of the line this should be on the second line"), rather than breaking off at the right end of the line ("start of the rtl line") which is meant to be the beginning of the line.

I have been unable to find an explanation for this behavior, as it appears to me to be a fundamental expectation. What could possibly be my mistake? Thank you!

17-01-28 12:16 Updated description and fiddle link

Update: It turns out my issue was due to a python library (weasyprint) used for converting html to pdf not supporting RTL text
Appreciate everyone's input!

htmlcssarabicright-to-left

Answer №1

When dealing with right-to-left scripts such as Arabic, long texts will break at the correct position by default (similar to left-to-right scripts).

Take a look at the following Persian text (similar to Arabic) where I have embedded equivalent English words next to each number. This way, you can follow along with how the words are written in HTML code and displayed on the output web page:

<p dir="rtl" >
کلمه اول - کلمه دوم - کلمه سوم - کلمه چهارم - کلمه پنج - کلمه شش - کلمه هفت - کلمه هشت - کلمه نه - و انتهای جمله.
</p>

<p dir="rtl" >
کلمه اول first- کلمه دوم second - کلمه سوم third - کلمه چهارم fourth - کلمه پنج five - کلمه شش six - کلمه هفت seven - کلمه هشت eight - کلمه نه nine  - و انتهای end جمله.
</p>

<p dir="rtl" >
  کلمه اول firstWord-
  کلمه دوم secondW -
  کلمه سوم thirdW -
  کلمه چهارم fourthW -
  کلمه پنج fiveW -
  کلمه شش sixW -
  کلمه هفت sevenW -
  کلمه هشت eightW -
  کلمه نه nineW -
  و انتهای end جمله.
</p>

It's important to note that right-to-left texts should be aligned to the right by default.

Answer №2

It seems like this is the solution you've been searching for.

#rtl{
  word-wrap: break-word;
}
<p id="rtl" >arabic valuearabic valuearabic valuearabic valuearabic valuearabic valuearabic valuearabic value2<b> arabic label2 </b> ar value1 <b>ar_label1</b></p>

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 could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

cssnext.jshovertailwind-css

I am struggling to create a drop-down menu and need help figuring it out

I've tried looking at other questions but still can't get my code to work. Below is the HTML and CSS I'm working with (feel free to condense or modify as needed). .dropdown-menu li ul { display: none; height: auto; margin: 0; padd ...

htmlcssdrop-down-menu

Style Vue slots one by one

I am a beginner delving into the world of vue (specifically, vue 2) and aiming to grasp the concept of utilizing slots in the most effective manner. Below is the code I'm working with: <template> <div> <button cla ...

htmlcssvue.js

A few of the input fields I filled out are not getting sent to the PHP script

Currently, I am working on a school project that involves creating a website similar to IMDB. My task is to include comments in our database, but I am facing an issue where two fields (fid and spoiler) are not getting posted to the PHP script handling the ...

phphtmlpost

Attempting to display an image based on the outcome of a function that was executed earlier

As a beginner in the world of JavaScript, I kindly ask for your patience and detailed explanations in helping me understand the concepts. My current project involves creating a button that randomly selects a name from a list and displays it along with an ...

javascripthtmllistrandom

Creating a loading spinner in a Bootstrap 5 modal while making an XMLHttpRequest

While working on a xmlhttprequest in JavaScript, I incorporated a bootstrap spinner within a modal to indicate loading. The modal toggles correctly, but I am struggling to hide it once the loading is complete. I prefer using vanilla JavaScript for this ta ...

javascripthtmlcssbootstrap-5bootstrap5-modal

Unlock the power of polymer iron-ajax by seamlessly linking input element data to the iron-ajax's body attribute

Having some trouble binding data from an input element to the "body" attribute of iron-ajax. In the past, using core-ajax in Polymer 0.5, I could easily bind values like so: <core-ajax id="ajax" method="POST" contentTy ...

javascripthtmlajaxpolymer

Having issues with the tailwindcss transformation not functioning properly, but the problem seems to resolve when directly incorporating it into the

Lately, I decided to start utilizing tailwindcss and I have noticed that certain properties do not seem to function at all. However, when I incorporate them into my CSS directly, they work perfectly fine. Allow me to provide an example. const Step = styled ...

cssreactjsstyled-componentstailwind-css

Why does the click on the download link result in the image opening instead?

I'm having an issue with my code that is supposed to download a file, but instead it opens the file. What am I doing wrong? <html> <body> <p>Click on the Image to download the image:<p> <a href="/website/image1.jpg" downl ...

javascripthtml

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

When accessing the defaultValue property of a select element, it will result in

Here is a typical HTML dropdown menu: <select name="email" id="email"> <option value="2" selected="selected">Before redirecting to PayPal</option> <option value="1">After payment is successful</option> <opti ...

javascriptjqueryhtml

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

javascriptjqueryhtmlfocus

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

htmlcss

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

javascriptjqueryhtmlcssfunction

Customizing styling classes based on the parent element in LESS

My LESS styles look like the following code snippet. I am wondering if there is a way in LESS to handle this scenario more efficiently without repeating the class name for each parent element. span { .zero { color: #fff; } } div { ...

cssless

IE8 Image Links Not Working Without Chrome Frame Enabled

Upon visiting the website below, you'll notice a slideshow featured at the top of the homepage. Utilizing Nivo Slider, our client has brought to our attention that the links are not operational in IE8. The issue may be related to the "slide-overlay" ...

jquerycssnivo-slidergoogle-chrome-frame

Display a grid layout containing 5 divs in each row, ensuring that all rows begin and end in the

I need to arrange 5 divs (tiles) on each row in a consistent manner. I attempted to accomplish this by checking for every 5th element and adding an empty div if the count is divisible by 5. However, this approach causes rows to start and end at different ...

htmlcss

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

csscss-selectors

Animating Swipes with CSS3

Currently, I am in the process of developing a mobile application framework using HTML 5, CSS3, and jQuery. The layout for the 'screens' markup is structured as follows: <div class="page" id="home"> <!-- content goes here... --> ...

jqueryioscsswebkit