Idea: More flexible styling of blockquotes and lists (e.g. for card templates)

This is a suggestion inspired by #212 – @ryantheleach’s request for printable card templates in the Homebrewery. @wrdclark did some great work mocking up some styles for cards based on <div class='card'>, but unfortunately, as @vlos observed, deeply nested <div> tags tend to switch the markdown parser into HTML mode, and thus lose the ability to use nice markdown formatting.

Looking into this, I discovered @stolksdorf’s cool trick of styling lists differently if they immediately follow a <hr>, and I couldn’t help thinking that this would also be useful for cards, allowing us to nest their content in a <blockquote> and not a <div> and thus preserve markdown formatting.

Unfortunately, there’s only one kind of <hr/> tag, and so we need something else to attach styling to. This is where we can exploit two facts: Firstly, <h6> are currently unstyled and hence almost definitely unused; secondly, marked (our Markdown parser) generates IDs for the <h6> tags based on the text of the heading. To make a long story short, here’s a bit of markup:

###### card
> ### Goblin
>
> <img src="http://i.imgur.com/ET6Hp6D.png" style="height: 5cm;"/>
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|8 (-1)|14 (+2)|10 (+0)|10 (+0)|8 (-1)|8 (-1)|
>___
> <div class='descriptive'>
> - All markdown formatting works.
> - Even nested lists.
>   - And sublists.
> </div>
>

And here’s how it could render: .

The key trick is to write selectors that begin with h6[id|='card'] + blockquote, meaning “the blockquote immediately following the <h6> tag whose ID starts with card”. In particular, this also allows different styles of card – ###### card back could, for example, rotate the card by 180 degrees, so that you can simply fold to get a standee/tent.

For a more complete picture, including the CSS in its current form, please see this brew. (Full disclosure: Due to what seems like a Chrome bug, currently the rotated cards are not displayed in the PDF view in columns after the first (even to get them to render in the browser, I had to add the spurious translateZ(0) to the transform). Any suggestions for what may be going wrong would be very welcome.)

Once I got this far, I realized that this also has the potential of cutting down on some boilerplate. For example, when defining a spell, there’s the spell kind plus four other properties that always appear in the same order. The current template includes them in the markdown that the user writes, but conceivably we could hide them in the stylesheet and simply require the user to enter the things that actually vary:

###### spell
#### Illusionary Transfiguration of the Babysitter
- 7th-level transmutation
- 1 action
- 60 feet
- M (discarded gum wrapper, a small doll, a crushed button worth at least 1cp)
- Instantaneous
- A flame, equivalent in brightness to a torch, springs from from an object that you touch. 
  The effect look like a regular flame, but it creates no heat and doesn't use oxygen. 
  A *continual flame* can be covered or hidden but not smothered or quenched.

For a stylesheet that makes this equivalent to the current spell snippet, see this brew. Similarly, when defining class features, there are sections on hit points and proficiencies that are very formulaic; see this brew for a possible way of condensing that.

It seems that using <h6> headings plus blockquotes or lists in this way allows us to style markdown in radically different ways without requiring too many contortions. What do you think?

[Gazook89]

@ryantheleach if you are looking for MtG cards, here is a brew I put together after lots of experimenting. However, this is pre-v3 which isn’t really a problem because we kept the Legacy renderer as well. I do have other brew documents that are different attempts to make cards (such as this, and this) as well.

I’m not going to say it’s 100% straightforward, but it is an option and does demonstrate the flexibility of homebrewery (even before v3).

That said, further development can happen for different layouts in the future as @calculuschild says and hopefully it just gets easier.

[calculuschild]

@ryantheleach The core issue here was resolved (more flexible styling) and you can see several examples by looking at the Snippets available in V3, as well as taking a look at the V3 welcome page here: https://homebrewery.naturalcrit.com/v3_preview

We have not officially created a card layout if that is what you are looking for, but that may be something we add in the future, and you can certainly ask around on the subreddit https://www.reddit.com/r/homebrewery because I know some people have done things like that before.