CODEWITHSUNDEEP
htmltitleright-to-left
Justinas Staskus
Justinas Staskus

Reputation: 59

HTML title attribute aligment on RTL sites

On chrome/safari browsers html title attribute gets aligned incorrectly. It works correctly on firefox.

This is how it looks on firefox (OK): http://postimg.org/image/dbniihkv5/ This is how it looks on chrome (FAIL): http://postimg.org/image/c4h8x78nt/

Code of this example:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body dir="rtl">
    <img
        title="نور روشن است که در پشت موضوع شما و سنسور جلو و عقب از دست رفته است، آن را برای دوربین اول معلوم شد که."
        width="200"
        height="100"
        src="https://www.imagecomics.com/uploads/banners/images/zero_2_large.jpg">
</body>

Any ideas how to get it aligned properly ?

Thank you.

Upvotes: 2

Views: 2617

Answers (3)

user.dz
user.dz

Reputation: 1032

HTML title is not displayed in HTML frame view in most browsers. Instead, it is displayed in the browser window title bar or tab labels. So Not all of the browsers have implemented direction & alignment for title. They just follow OS language default alignment. (Even the BiDi direction is correct, the alignment follow system default)

In other word, HTML Title could not be controlled with HTML BiDi Attributes.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

I’m afraid you can’t change the alignment, as it is under the control of the browser and immune to CSS settings (except perhaps via some browser-specific hacks). Cf. to Setting a different direction for the input tag and its title attribute.

The best workaround (well, probably better than a solution would be) is to a CSS (or CSS+JavaScript) tooltip instead of the title attribute. You get many extras with this, like the possibility of setting the font face, size, etc. And alignment is automatically correct. Example (with jsfiddle):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    .tipped { position: relative; }
    .tipped .tip { display: none; position: absolute; right: 1em; top: -3em;}
    .tipped:hover .tip {
      display: block;
      background: #ffe;
      color: black;
      border: solid 1px #333;
      padding: 0.2em 0.3em;
      width: 22em;
    }
    </style>
</head>
<body dir="rtl">
<span class=tipped>
<img
        width="200"
        height="100"
        src="https://www.imagecomics.com/uploads/banners/images/zero_2_large.jpg">
<span class=tip>
نور روشن است که در پشت موضوع شما و سنسور جلو و عقب از دست رفته است، آن را برای دوربین اول معلوم شد که.
</span>
</span>
</body>

Upvotes: 3

skullaria
skullaria

Reputation: 1

Well, I'm not all that familiar with the RTL attribute, but I've never seen it in the body tag before, put it in the html tag and try that. 

<HTML DIR="RTL">

Don't forget your page title. :)

Upvotes: -2

Related Questions