display: div; direction: rtl;... screwing up certain characters: !?. etc.

**gib65** · 06-07-2018, 04:19 AM

Hello,

Please make an html page with the following code:

HTML Code:

<html>
<head></head>
<body>
<center>
<div style="width: 100px; margin: auto; display: flex; direction: rtl; background-color: pink;">
<span style="margin: auto;">Hola!</span>
</div>
</center>
</body>
</html>

Note that the text "Hola!" is in a div with flex display and the direction is rtl.

Apparently, this causes certain text characters to be laid out in the right-to-left order despite where it is with respect to the rest of the text. For example, the ! appears to the right of 'Hola' in the html code but to the left when rendered in the browser.

This should never be. The rtl style is meant to arrange the layout of elements, not text characters. The text 'Hola!' is one element, it should be treated as a single unit. If I'm wrong about this, why on Earth would the browser choose some characters and not others to be seperated from the rest such as to flow according to the rtl setting of the direction style of flex divs? For example, what if someone wanted a right-to-left flow, but one of the elements was a couple a sentences such as:

Hey! Are you OK?

Would that appear like:

?Are you OK !Hey

Like seriously! WTF?!

**molendijk** · 06-08-2018, 04:09 PM

Apparently, punctuation marks are treated as separate units (not belonging to other units).

**coothead** · 06-08-2018, 10:15 PM

Hi there gib65.

I am not sure what your actual requirement is.

Do you want the text to be rendered as !olaH or do you
want Hola! to be aligned to the right of it's container?

Perhaps you can elucidate.

coothead

**styxlawyer** · 06-09-2018, 07:49 AM

If you are using 'flex' you should also use 'flex-direction'. CSS 'direction' justifies the text in a block element to the left or to the right, it does not change the display sequence of the blocks.

Try this:

Code:

<html>
<head></head>
<body>
<center>
<div style="width: 200px; margin: auto; display: flex; flex-direction: row-reverse; background-color: pink;">
<span style="margin: auto;">Hola 1!</span>
<span style="margin: auto;">Hola 2!</span>
<span style="margin: auto;">Hola 3!</span>
</div>
</center>
</body>
</html>

**molendijk** · 06-10-2018, 01:12 PM

Gib65's observation is correct: 'rtl' should arrange the layout of elements, not text characters. But, apparently, punctuation marks are not (treated as) text characters but as separate elements. So 'Hola!' is not just one element; it consists of 2 elements: 'Hola' and '!'. This explains why 'Hola!' is rendered as '!Hola' when 'direction: rtl' is used.
If this is a problem and if we still want to use 'direction', we can solve the matter by using 'rtl' in an outer div, and 'ltr' in an inner div, like this:

Code:

<div style="width: 200px; margin: auto; text-align: center; direction: rtl; background-color: pink; ">
<div style="direction: ltr; display: inline-block">Hola!</div>
<div style="direction: ltr; display: inline-block">Hallo!</div>
<div style="direction: ltr; display: inline-block">Bonjour!</div>
</div>

**styxlawyer** · 06-10-2018, 10:18 PM

... but why go to all that trouble if 'flex-direction: row-reverse;' works in an identical manner?

**molendijk** · 06-11-2018, 11:13 AM

Originally Posted by styxlawyer

... but why go to all that trouble if 'flex-direction: row-reverse;' works in an identical manner?

Browser support.

**gib65** · 06-13-2018, 01:43 AM

"...or do you want Hola! to be aligned to the right of it's container?"

^ Yes, that.

It just seems odd to me that w3school would decide that some characters would adhere to the rtl setting but not others. I would think the rtl flow would apply to whole elements rather than specific characters. So Hola! would be an element, and Hola! amigo! would be two elements, which (given a rtl flow) would be rendered as: amigo! Hola!

But the way rtl works currently seems to treat 'Hola' as one element and '!' as another, thus rendering them as: !Hola

That seems so backwards to me (no pun intended).

Anyway, I don't suppose there's a way around this, is there?

**coothead** · 06-13-2018, 09:39 AM

Hi there gib65,

personally, I wouldn't use "flex" or "direction: rtl" for this task.

I found that "float" seemed to be the simple solution.

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#holas {
    width: 12.5em;
    padding: 0.25em 0.5em;
    margin: auto; 
    box-styling: border-box;
    overflow: hidden;
    background-color: #ffc0cb;
 }
 
#holas span {
    float: right;
 }
</style>

</head>
<body> 

<div id="holas">
 <span>Hola!</span>
</div>

</body>
</html>

coothead

**molendijk** · 06-13-2018, 11:15 AM

Originally Posted by coothead

I found that "float" seemed to be the simple solution.

I would prefer to do away with the float because that requires clearing it for subsequent text. Why not use direction: rtl; for #holas, then direction: ltr; and display: inline-block; for #holas span?

Code:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
 
#holas {
    text-align: center;
    direction: rtl;
 }
 
#holas span {
    background-color: #ffc0cb;
    display: inline-block;
    direction: ltr; 
 }
</style>

</head>
<body> 

<div id="holas" >
 <span>Hola 1!</span>
 <span>Hola 2!</span>
 <span>Hola 3!</span>
</div>

</body>
</html>