Fwd: [polymerdiscuss] Setting direction specific CSS

0 views
Skip to first unread message

James Hawkins

unread,
Apr 6, 2015, 1:48:59 PM4/6/15
to chromium...@chromium.org
Hey Settings folks,

The following is an update on how we'll likely need to get RTL working for our custom element styling in the short term.  We'll need to remember this topic as a potential performance hotspot once we start fine-tuning.

Thanks,
James

---------- Forwarded message ----------
From: Arthur Evans <art...@google.com>
Date: Fri, Apr 3, 2015 at 10:04 PM
Subject: Re: [polymerdiscuss] Setting direction specific CSS
To: Jennifer Apacible <apac...@google.com>
Cc: Polymer Discuss <polymer...@google.com>, Jeremy Klein <jlk...@google.com>, James Hawkins <jhaw...@google.com>


Short answer: One approach would be to use :host-context, like this:

:host-context(html[dir='ltr']) .blocking-issue-title {
  padding-left: 8px;
}

:host-context(html[dir='rtl']) .blocking-issue-title {
  padding-right: 8px;
}

I'm not sure how fast this selector is. But /deep/ is also expensive, so it might be worth testing.

Longer answer is that that seems like a good question that we probably should have a good answer for.

I'm deeply ignorant in regards to bidirectional text. But it seems like the html[dir='rtl'] rules wouldn't work correctly for documents with bidirectional text, like:

<html dir='ltr>
  ...
  <div> 
    <my-element> <!-- english text --> </my-element> 
  </div>
  <div dir='rtl'> 
    <my-element> <!-- hebrew text --></my-element>
   </div>
  ...
</html>

But perhaps I'm just borrowing trouble here.

Cheers,
Arthur







On Fri, Apr 3, 2015 at 2:58 PM, Jennifer Apacible <apac...@google.com> wrote:
Hi,

I'm trying to add direction specific CSS to a custom polymer element (left to right, right to left).

I have (simplified) an issue_banner.html and the corresponding issue_banner.css. I haven't been able to apply the dir='ltr' or dir='rtl' styling; the rest of the styling shows up on the inspector.

I talked to jhawkins@ and jlklein@ (cc'd) and their current workaround is to pull out the direction specific styling outside of the <polymer-element> tag and apply /deep/ to all of them. For example: issue_banner.html, issue_banner.css, and issue_banner_dir.css.

Is there an official approach for direction specific styling, or should we continue to use this solution?

Thanks!


Reply all
Reply to author
Forward
0 new messages