Align text to the right, overflowing to the left

Question

Note: This question is not answered in the above linked question, nor is it a duplicate. This question addresses the problem with the ordering of special characters when using text-direction: rtl, which it turns out can be solved with the unicode-bidi: bidi-override as pointed out by @Serlite below.

I have a div containing some text that I'd like to overflow to the left, not to the right.

For example, if the div contains all letters of the alphabet, the default behaviour is as follows:

I, however, want the contents of the div to be displayed like this:

Using direction: rtl in the styles for that div works fine, and achieves this effect perfectly for the above example, as well as if the contents contains just numbers (or a mix of alphanumeric characters) as shown below.

Standard behaviour:

Behaviour after setting direction: rtl:

The problem occurs when special characters are entered into the div, such as * and #.

Setting the string *#0123456789 as the div contents causes the following to be displayed:

Note the * moving from the start of the string to the end.

It's difficult to show the problem with just images, so here is a quick jsfiddle to better demonstrate it.

In general, it seems like weird things happen when setting the direction property, and so I'm guessing it's probably not the way to go.

Is there a way I can force the last characters to always be visible while the first characters overflow to the left?

Is your div `contenteditable` and content of it changable or is constant? — Mohammad, May 10 '16 at 15:30
What about with `text-align: right` ? Fiddle : https://jsfiddle.net/8zbzy4sL/3/ — Vincent G, May 10 '16 at 15:35
please tellme you don't mean something like this? https://jsfiddle.net/8zbzy4sL/4/ — , May 10 '16 at 15:36
@PeterDarmis @VincentG that doesn't solve the problem unfortunately. If you fill the inputs in your example so that they overflow, you'll see that `text-align: right;` doesn't solve the issue. See my 2nd and 4th images above for what I'm trying to achieve. — joshfarrant, May 10 '16 at 15:39
"In general, it seems like weird things happen when setting the direction property, and so I'm guessing it's probably not the way to go." Different punctuation symbols behave differently in different writing modes. This is perfectly normal behavior. But for your purposes, direction is indeed not the way to go. — BoltClock, May 10 '16 at 15:44
@dippas I think it does not solve the problem. The OP question is how to avoid (or solve) that the `*` does not move to right. — Francisco Romero, May 10 '16 at 15:44
@error404 You're correct, the accepted answer doesn't solve the issue, however a later answer suggesting using a wrapper div to take care of clipping the overflowing text on the left might actually do the trick. I'd considered that previously but it seemed like a bit of a hacky way to do it, but if there's no simpler way then that will be the way I go. — joshfarrant, May 10 '16 at 15:46
@JacobGray If there's a clean way to do it with JS then that's fine — joshfarrant, May 10 '16 at 15:52
@joshfarrant https://jsfiddle.net/8zbzy4sL/5/ is that clean enough? — Jacob G, May 10 '16 at 15:54
There is a funny way in css to let overflow disseapear at left ... https://jsfiddle.net/8zbzy4sL/7/ — G-Cyrillus, May 10 '16 at 15:58
@GCyrillus Think that's going to be similar to the way I solve it, and as in dippas's linked duplicate above. — joshfarrant, May 10 '16 at 16:14
Well, maybe there is a less tricky way with text-indent : https://jsfiddle.net/8zbzy4sL/8/ (also as a snippet in answer below) + should work in any language ... — G-Cyrillus, May 10 '16 at 16:31
It is annoying that overflow-X: hidden and text-align: right don't do the trick. Does anyone know why browsers handle it this way? — MSC, May 30 '16 at 01:15

score 3 · Accepted Answer · answered May 10 '16 at 16:07

The unexpected reordering you're observing is due to an algorithm used for determining the ordering of bi-directional text. I won't go into details on how the ordering is exactly determined, but basically characters are classified by strong, weak, and neutral directionality, which is used to order them in a string.

Your string "*#02468" consists only of a mix of characters with weak or neutral directionality, meaning their ordering may be unexpected without the context of a strongly directional character (like Arabic text, which reads right-to-left). Depending on the characters you use, they may seem to contradict the specified direction.

To avoid this behaviour you're encountering, you can use the unicode-bidi property to override the algorithm, and rely strictly on the specified direction:

#rtl {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Here's an updated JSFiddle.

You can also read up a bit more on the logical ordering of this algorithm, if you're interested. It's a bit too complex to go into detail about.

Hope this helps! Let me know if you have any questions.

Note: If you don't want the characters in your string reversed, this won't work for you. In that case, go with an approach that doesn't use the direction property - because that's exactly what the property was designed for.

This is the solution I went with, thanks for your suggestion @Serlite. I in fact don't want the characters in my string reversed, however I'm using react and so it was trivial to reverse the characters of my string on render. It works perfectly! — joshfarrant, May 11 '16 at 08:53

G-Cyrillus · Answer 2 · 2016-05-10T16:29:43.543

EDIT Maybe a less tricky way with text-indent and text-align:

input {
  width: 200px;
  font-size: 30px;
  border:none;
  background:none;
  color:white;
  background:#26A0DA;
}
#rtl {
  text-align: right;
  text-indent: -9999px;
}
label {
  display:inline-block;
  line-height:2em;
  padding:0 5em;
  background:#26A0DA;
  }

<label for="ltr">ltr
  <input id="ltr" value="*#02468456789" />
</label>

<label for="rtl">rtl
  <input id="rtl" value="*#02468456789" />
</label>

from my comment, i'll also go with a funny answer : any feed back appreciated

input {
  width: 200px;
  font-size: 30px;
}
label {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  margin:0 2em;
  background:gray;
}
#rtl {
  float: right;
  text-align: right;
  width: 900px;/* whatever */
  margin-left: -900px;/* at least as much as width to give a virtual width close to null, so it sticks at right but do not get pushed  */
}

<label for="ltr">ltr
  <input id="ltr" value="*#abcdefghijklmnopqrstuv" />
</label>

<label for="rtl">rtl
  <br/>
  <input id="rtl" value="*#abcdefghijklmnopqrstuv" />
</label>

https://jsfiddle.net/8zbzy4sL/7/

Why you create `input`? @joshfarrant need to `div` that contain static text. — Mohammad, May 10 '16 at 16:14
@Mohammad input are from the fiddle the OP linked , i used the op HTML. this technique works with any other imbricated tag, it worked even with IE5.5 ... long long ago ;) — G-Cyrillus, May 10 '16 at 16:14

dippas · Answer 3 · 2016-05-10T16:18:05.567

0

you can use float:right and text-align:right in input

input {
  width: 200px;
  font-size: 30px;
}
#rtl, label:last-of-type {
  float: right;
  text-align: right;
}

<label for="ltr">ltr
  <input id="ltr" value="*#02468" />
</label>
<hr />
<label for="rtl">rtl
  <input id="rtl" value="*#02468" />
</label>

edited May 10 '16 at 16:18

answered May 10 '16 at 15:33

dippas

58,591
15
114
126

Why you create input? He need to div that contain static text. – Mohammad May 10 '16 at 16:15
@Mohammad did you check OP's fiddle? OP has `input` – dippas May 10 '16 at 16:16
In comment @joshfarrant sayed: `div with static content`. – Mohammad May 10 '16 at 16:17
@dippas , did you use my comment to undelete and update your answer :p – G-Cyrillus May 10 '16 at 16:18
@GCyrillus no I didn't ;) actually I deleted because I found a possible dupe and my first answer wasn't working, still I keep working on it... but TBH I didn't look at the comments in the question – dippas May 10 '16 at 16:20
1

nevermind, it was also on your duplicate link, just the safe negative margin was not there :) why this downvote by the way , it works ? – G-Cyrillus May 10 '16 at 16:21
1

wonder why I was dowvoted, care to explain downvoter? – dippas May 10 '16 at 16:26

Mohammad · Answer 4 · 2016-05-10T16:10:55.420

0

You can use CSS position to do this work. For your purpose you need to create two div. Parent div and child div. Child div contain text and has ltr direction.

.box {
    width: 500px;
    height: 50px;
    padding-top: 20px;
    background: #26A0DA;
}

.parent {
    width: 300px;
    height: 30px;
    margin: 0px auto;
    position: relative;   
    overflow: hidden; 
}
  
.child {
   position: absolute;
   right: 0px;
   font-family: arial;
   font-size: 25px;
   color: #eee;
}

<div class="box">
    <div class="parent">
        <div class="child">abcdefghijklmnopqrstuvwxyz</div>
    </div>
</div>

edited May 10 '16 at 16:10

answered May 10 '16 at 16:03

Mohammad

21,175
15
55
84

would this work with input ? – G-Cyrillus May 10 '16 at 16:05
No, only for static text. – Mohammad May 10 '16 at 16:07

Align text to the right, overflowing to the left

4 Answers4