Log in

View Full Version : 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>
<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:



<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:
<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
... 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 <span>Hola!</span> would be an element, and <span>Hola!</span> <span>amigo!</span> 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. :D


<!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
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?
<!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>
molendijk
06-13-2018, 01:50 PM
I've done some research on the matter and found that punctuation marks are placed to the left of the text (when the writing direction is right-to-left) because that's their correct position for languages written right to left (like Hebrew). When you want them to the right of the text, just add &lrm; to the end of the word, after the punctuation mark. See also https://dotancohen.com/howto/rtl_right_to_left.html
So gib65's original code should have been:
<html>
<head></head>
<body>
<center>
<div style="width: 100px; margin: auto; display: flex; direction: rtl; background-color: pink;">
<span style="margin: auto;">Hola!&lrm;</span>
</div>
</center>
</body>
</html>
styxlawyer
06-13-2018, 11:04 PM
"...or do you want Hola! to be aligned to the right of it's container?"

^ Yes, that.



If that is really what you want to achieve, then the correct solution is:



text-align; right;