naturalcrit / homebrewery

Create authentic looking D&D homebrews using only markdown
https://homebrewery.naturalcrit.com
MIT License
1.09k stars 326 forks source link

Indent 2nd paragraph in monster stat block #181

Closed Fralexion closed 3 years ago

Fralexion commented 8 years ago

If the description of a monster's ability or action takes up multiple paragraphs to describe (such as a dryad's Fey Charm action), there should be no vertical separation between the paragraphs and each one after the first should have a slight indent, as normal text outside a stat block does.

Currently, the only way to avoid separating the paragraphs is to end the upper one with two spaces before hitting Enter (which I discovered by accident) and there is no way to put an indent in the lower ones.

calculuschild commented 3 years ago

We might be able to leverage our : blank line syntax here, since paragraphs afterward are unindented.

**First item** La dee dah dee dah
:
**Second Item** Zippity-doo-dah

Another paragraph of Second Item

And another. Both indented.
:
**Third Item** Back to unindented
ericscheid commented 3 years ago

For reference - note the Enslave action: Aboleth in WotC Monster Manual

ericscheid commented 3 years ago

Another possibiity is to syntax those actions as definition list items and then the 2nd paras would just be paras. Might need an extra curly-div for semantics and also css-targetting:

{{monster,frame
[...]

{{monster-actions
### Actions
***Action Thingo One*** :: description of the action
***Another Action*** :: description of the action
***Enslave (3/Day).*** :: The aboleth targets one creature it can see within 30 feet of it. The target must succeed on a DC 14 Wisdom saving throw or be magically charmed by the aboleth until the aboleth dies or until it is on a different plane of existence from the target. The charmed target is under the aboleth's control and can't take reactions, and the aboleth and the target can communicate telepathically with each other over any distance.
New paragraph .. Whenever the charmed target takes damage, the target can repeat the saving throw. On a success, the effect ends. No more than once every 24 hours, the target can also repeat the saving throw when it is at least 1 mile away from the aboleth.
}}

}}

But then again, on second thoughts ... this is stylised the same both within and without the {{monster block}}, which is encouraging and predictable to authors (and they don't have to learn about any weird css we special case).

***Bolded words.*** Morbi non erat non ipsum pharetra tempus.
:
***Aliquam ultrices.*** Scelerisque sem. In elit nulla, molestie vel, ornare sit.
:
***Pellentesque sit amet*** Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat. Aliquam ultrices scelerisque sem. 

In elit nulla, molestie vel, ornare sit amet, interdum vel, mauris. Etiam dignissim imperdiet metus.amet, interdum vel, mauris. Etiam dignissim imperdiet metus.

You would need to undo the .page .monster p+p { text-indent: 0; } though, which is not a problem.

The gap between items is currently done via .page .monster p { margin-bottom: .3cm; } which is no longer needed with the : line spacings. That said, the <div class="blank"> </div> inserts a gap which is different from the current gap. You'll need to tweak that too.

We'd also need to insert : between the paragraphs above Actions too. There don't appear to be any other paragraphs affected by that change.

calculuschild commented 3 years ago

just using <dl> directly would be nice here, if we made this a special case for monster blocks where instead of hanging indents, it's just no indent. But... looking at your screenshot @ericscheid it seems there are also some cases when we need hanging indents too. What do you think? Is that just a fluke in the MM or do we really need to handle all 3 cases: Normal indent, Hanging indent, No indent?

ericscheid commented 3 years ago

need hanging indents too?

In the Legendary Actions section? There's also no inter-¶ gaps too, which is weird.

I'll skim thru MM for examples, but I'd prefer some consistency. There's no good design reason why Legendary Actions should have different styles from Actions.

calculuschild commented 3 years ago

Google brew with possible fix using tweaked CSS.

https://homebrewery.naturalcrit.com/share/16ImcNizU98aZqUxvS8C_7jHpESlG55vTKk9rTojtRVWt

Gazook89 commented 3 years ago

You could also target the Actions portion separately from the definition list above it with [id="Actions"] + whichever element . Of course, that is oddly specific to just DND, but what isn't in the homebrewery?

calculuschild commented 3 years ago

I'm not sure targeting a text-dependent ID is a good idea. Locking in specific wording is just too restrictive.

Gazook89 commented 3 years ago

[removing this comment as I was wrong about li spacing now that i've look at PHB.]

ericscheid commented 3 years ago

If there is a chunk of content with semantic identity then that can be done via wrapping into a block and giving it a class name:

monster stat block with sub-division class "actions"

This will work even if the text of the heading is no longer the english language word "Action"

german language monster stat block with "Aktionen"

calculuschild commented 3 years ago

The margin-top/bottom spacing in the monster block is too much:

@Gazook89 How do you mean?

If there is a chunk of content with semantic identity then that can be done via wrapping into a block and giving it a class name:

@ericscheid True, but if we can gracefully allow the users to set the formatting without resorting to explicit "style regions" I think that will be more flexible. The "Spell" snippet, for example, is entirely "no-div" markdown and is just... beautiful. It does everything it needs.

I think my example above achieves this. Instead of needing special rules for this special case, we just use the tools of markdown to directly manage the content appearance. Bonus, it's the same formatting as standard paragraphs, so users don't need to be surprised that there is/isn't hanging indents moving between those regions, and turning on/off indentation works the same everywhere.

ericscheid commented 3 years ago

My suggestion was mainly in counter to relying on [id="actions"] + blah.

My preference in priority order:

  1. use raw markdown (and our extensions like :)
  2. use css selectors for the naturally occuring markdown→html
    (i.e. not wonky special introduced markdown which we then hide away thru more css)
  3. use classed blocks for special blocks of whatever size (e.g. class="monster" or `class="actions")
  4. ...
  5. ...
  6. ...
  7. ...
  8. ...
  9. use adjacency rules for exceptions, like hr + p, relying on weird combinations of syntax to trigger styling
  10. rely on heading text content producing hard coded english language IDs for css selectors

If we have two sub-divisions within a classed block that are syntaxtically the same (e.g. just a series of paragraphs) but are meant to be styled differently (e.g. indents vs not indents, or one mimics a dl but the other doesn't), then that's a point (2) case.

TL;DR: use : to prevent the default p+p indenting styling. No special css rules or further syntax required.

I would however suggest that the height of : should be expressed in em for consistency with surrounding text height.

calculuschild commented 3 years ago

Cool. Yes I fully agree.

Ok, I am putting a PR together for this then.

calculuschild commented 3 years ago

Fixed with #1680