Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

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

    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?!
    Last edited by keyboard; 06-09-2018 at 01:18 AM. Reason: Format: HTML Tags

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,809
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

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

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    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
    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    474
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

    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>

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,809
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    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>

  6. #6
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    474
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

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

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,809
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Quote Originally Posted by styxlawyer View Post
    ... but why go to all that trouble if 'flex-direction: row-reverse;' works in an identical manner?
    Browser support.

  8. #8
    Join Date
    Jun 2008
    Posts
    192
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    "...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?

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    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
    Last edited by coothead; 06-13-2018 at 12:03 PM.
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,809
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    55

    Default

    Quote Originally Posted by coothead View Post
    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>

Similar Threads

  1. gAjax RSS Feeds Displayer - display more feed characters
    By cxcskiing in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-25-2014, 06:03 PM
  2. Resolved Special characters in text don't display
    By Doomtomb in forum HTML
    Replies: 7
    Last Post: 04-20-2010, 02:40 AM
  3. Replies: 2
    Last Post: 02-03-2009, 10:45 PM
  4. Replies: 0
    Last Post: 01-18-2008, 04:00 PM
  5. Weird characters in the display of rss feed
    By soggy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-14-2006, 07:17 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •