When to use `>run display`?


#1

@jessegrosjean
Okay, I was noticing in the documentation that the items contains run elements. What I didn’t notice until I started playing with the themes was that unless you put some of the “Style Properties” under a >run[ display], those have no effect in the text that includes a particular tag.

Should then those who create a theme default to put all the “Style Properties” include those inside a >run[ display]? This is what I mean,

// The characteristics the text gets when a @today tag is added.
item[data-today] {
  > run[display] {
    font-style: normal;
    color: @today-text-color;
  }
}

Instead of,

// The characteristics the text gets when a @today tag is added.
item[data-today] {
  font-style: normal;
  color: @today-text-color;
}

#2

It’s up to you… including the > run is more specific/exact. But not including it is shorter. I guess generally I would go with the second shorter style when it works…

The reason that your two examples are equivalent is because both font-style and color are inherited properties. It’s only ever the run elements that actually draw the text, but if you haven’t explicitly styled a runs color, font, etc then it will look up in the containing elements for the appropriate properties.

But other properties such as text-underline or background-color are not inherited. When using those you’ll always need to target a run element directly to make them work.

Does that clear things up a bit? HTML/CSS has this same sort of system with some properties being inherited and others not.


#3

Yes, thank you. I just had to try all the properties to figure out which ones were inherited and which ones were not. After going through all that I just realized I could have saved 15 min by just including >run... by default :smile:


#4

Also see this page in the user’s guide which indicated which properties are inherited: http://guide.taskpaper.com/theme_definitions.html