Styling views via external CSS?
Because text views are now loaded via pb-view
, global CSS styles have no effect because the webcomponent is completely encapsulated. This has many benefits (because we can show completely disparate documents on one page without interference), but some downsides as well. Previously our recommendation was:
- styles which reflect the original structure or semantics of the document (e.g. highlights, emphasis, deletions, additions ...) should be defined in the ODD (e.g. bold, small-caps, underline ...)
- styles which apply to the appearance of the document in general should be defined in external stylesheets (because designing them is the job of the web designer, not the editor)
With our switch to polymer, 2. is no longer possible and the only means to apply styles is via the ODD.
Possible solutions:
- add a property to
pb-view
to allow an external style module to be imported dynamically. I'm sure this is possible but I don't know if it is desirable @joern? - extend the ODD to support global styles to be defined somewhere in teiHeader (@magda where?) and include those styles into the generated css
I lean towards solution 2 as it appears much cleaner to me. The encapsulation of styles would be preserved and everything applying to a particular type of document would stay in one place. Downside: designers would need to look into the ODD.