2023-07-03

How to change line break order when using bidi-override and right-to-left direction with CSS?

I'm using a little script which hides mail addresses using the fact that you can reverse text by using unicode-bidi: bidi-override and direction: rtl.

<span>
    <span>moc.e</span>
    <span>ussi-</span>
    <span>kaerb</span>
    <span>-enil</span>
    <span>@sser</span>
    <span>dda-l</span>
    <span>iam-t</span>
    <span>set</span>
</span>

With the following output:

test-mail-address@line-break-issue.com

Unfortunately, this doesn't work when the mail address is too long and contains a line-break:

screenshot line break issue

The reverse text direction causes that the end of the mail address comes before the line break:

-break-issue.com
test-mail-address@line

Check out the code snippet:

div {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 10px;
  vertical-align: top;
  font-size: small;
}

.small {
  border: 1px solid red;
  width: 170px;
}

.big {
  border: 1px solid green;
  width: 280px;
}

strong {
  display: block;
  margin-bottom: 30px;
}

span.eeb-rtl {
  unicode-bidi: bidi-override !important;
  direction: rtl !important;
  display: inline !important;
}

span.eeb-rtl span.eeb-sd {
  display: inline !important;
  padding-left: 0 !important;
}
<div class="small">
  <strong>Small container</strong>
  <span class="eeb eeb-rtl">
    <span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
  </span>
</div>
<div class="big">
  <strong>Big container</strong>
  <span class="eeb eeb-rtl">
    <span class="eeb-sd">moc.e</span><span class="eeb-sd">ussi-</span><span class="eeb-sd">kaerb</span><span class="eeb-sd">-enil</span><span class="eeb-sd">@sser</span><span class="eeb-sd">dda-l</span><span class="eeb-sd">iam-t</span><span class="eeb-sd">set</span>
  </span>
</div>

Is there any CSS option to correct the line breaking order in a small container?

The result should be:

test-mail-address@line-
break-issue.com


No comments:

Post a Comment