CODEWITHSUNDEEP
htmlcss
user3869177
user3869177

Reputation: 87

Is it possible to change in line attributes using CSS?

I need to change an in line html dir attribute in the English version of a mixed Arabic and English Twitter feed from dir="ltr"to dir="rtl" in order to avoid full stops appearing in the wrong place in the included Arabic tweets. (The English tweets would be then displayed right to left but would at least be grammatically correct, whereas the Arabic tweets when displayed left to right have a full stop in the middle of the sentence.)

Is it possible to do this with CSS?

I've read that you can change an inline style using CSS as in the example below:

Div with in line style for red background:

<div style="background: red;">
</div>

CSS to change red to yellow:

div[style] {
background: yellow !important;
}

Can this be done for other attributes such as dir?

The div I need to change is in an iframe. Changing dir="ltr" to "rtl" in Firebug displays all text right to left which is what I want.

<iframe id=“twitter-widget-0” class=“twitter-timeline twitter-timeline-rendered” scrolling=“no”   height=“862” frameborder=“0” allowtransparency=“true” style=“border: medium none; max-width: 100%; min-width: 180px; width: 300px;” title=“Twitter Timeline”>
    <html>
        <body>
            <div id=“twitter-widget-0” class=“root timeline ltr customisable-border twitter-timeline not-touch twitter-timeline-rendered var-static var-narrow” lang=“ar” data-scribe=“page:timeline” data-iframe-title=“Twitter Timeline” data-dt-long=“%{day} %{month} %{year}” data-dt-short=“%{day} %{month}” data-dt-abbr=“%{number}%{symbol}” data-dt-months=“Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec” data-dt-hours=“hours” data-dt-hour=“hour” data-dt-minutes=“minutes” data-dt-minute=“minute” data-dt-seconds=“seconds” data-dt-second=“second” data-dt-h=“h” data-dt-m=“m” data-dt-s=“s” data-dt-now=“now” data-profile-id=“2645852642” data-timeline-type=“profile” dir=“ltr” data-twitter-event-id=“0”>
            </div>
        </body>
    </html>
</iframe>

The site I'm developing is here:

http://dominodev1.co.uk

(You will see that in the English version the Arabic tweets have a full stop at the right hand edge of the bottom line which is in fact the middle of the sentence.)

Many thanks,

Phil

Upvotes: 1

Views: 229

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382464

The proper way isn't to change the atribute (you can't from CSS) but to change the direction css property :

someSelector {
    direction: rtl;
}

Upvotes: 5

Related Questions