Narratives Right Panel Text Style

[ktmeaton]

Hi Nextstrain team,

Context
I would like to have additional text styling features available in the right panel for auspice narratives (auspiceMainDisplayMarkdown). Specifically, I would like to be able to align text (ex. centering figure captions below images). Although other text customization would be useful such as size, color, font etc. Currently, this is possible in the left panel but doesn't seem to work for the right panel.

Description
I would like to be able to use texting style attributes with in-line html tags <p> and <pre> in the same way for both the left and right panels.

Examples

# [Left Panel Styling](https://nextstrain.org/community/inrb-drc/ebola-nord-kivu)
<p style='text-align:center; color:red; font-size:30px; font-family:Arial'>
Big, red, centered, Arial text.
<br>
<b>Bolded!</b>
</p>

```auspiceMainDisplayMarkdown
# Right Panel Styling
<p style='text-align:center; color:red; font-size:30px; font-family:Arial'>
I would like this to be big, red, centered, Arial text.
<b>This text doesn't appear!</b>
</p>
```  (End example)

Possible solution
I wonder if this happens because of input sanitizing happening at:
https://github.com/nextstrain/auspice/blob/master/src/components/narrative/MainDisplayMarkdown.js#L148 which restricts the allowed attributes.

I'll admit that I'm pretty new to html styling so if there's another way to accomplish this I'm all ears!

Thanks!

[ktmeaton]

update description to specify narratives

[jameshadfield]

Hi @ktmeaton -- you're right that this is part of the HTML sanitizing performed for security reasons. PR #1087 will make this consistent for everywhere we render markdown, so that the sidebar + main display have the same capability. There's a comment there indicating that style tags shouldn't be allowed for click-jacking reasons -- cc @tsibley do you know of a way to accomplish this whilst still stripping out style tags?

[ktmeaton]

Thanks for your response! If I can't modify the style attribute for security reasons then I completely understand (never thought about preventing click-jacking before, good to know). I also would understand if you didn't want me to play too much with style if the narratives are supposed to have a controlled aesthetic. I can always adapt to what's available!

Am I correct in understanding that after PR #1087, all markdown will be sanitized (both sidebar and main display) and the style attribute will be excluded? If so, I'll start thinking of alternate ways to display figures and their captions that don't rely on style='text-align: center.

[tsibley]

It seems like it'd be useful if Auspice provided reasonable default styles for the narrative which centered figures and their captions (presuming it doesn't do this now). We could do this easily for <figure> and <figcaption> elements.

Additionally, we some further work, Auspice could allow a safe subset of style rules which could provide much of the desired typography control (face, size, color, weight, etc). I've done this before by using carefully constructed regexes to validate the content of the style attribute (here's an example, though we wouldn't want to use that directly). It's also possible to use an actual CSS parser, if one is readily available. The principle of validation is the same, and I believe DOMpurify gives us enough hooks to do it.