terminal.css icon indicating copy to clipboard operation
terminal.css copied to clipboard

Fix blockquote empty overhang

Open herrbischoff opened this issue 2 years ago • 1 comments

When the blockquote element only contains a p element but no footer element or similar trailing tag, the ::after pseudo class paints a trailing empty line which only contains the ">" character. This is caused by an overhanging paragraph margin. Removing the margin for any last element contained in blockquote removes this visual glitch.

herrbischoff avatar Mar 24 '22 09:03 herrbischoff

Example

The kitchen sink example on https://terminalcss.xyz demonstrates a block quote as follows:

<blockquote>
    <p>
      <em>This is a properly formatted blockquote, btw.</em> Measuring
      programming progress by lines of code is like measuring aircraft building
      progress by weight.
    </p>
    <footer>
      <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
    </footer>
  </blockquote>

which outputs in the browser as (line breaks by me for illustration purposes here)

> This is a properly formatted blockquote, btw. Measuring programming
> progress by lines of code is like measuring aircraft building
> progress by weight.
>
> Bill Gates

This works as expected. However, as soon as you leave out the footer tag,

<blockquote>
    <p>
      <em>This is a properly formatted blockquote, btw.</em> Measuring
      programming progress by lines of code is like measuring aircraft building
      progress by weight.
    </p>
  </blockquote>

outputs as

> This is a properly formatted blockquote, btw. Measuring programming
> progress by lines of code is like measuring aircraft building
> progress by weight.
>

when it really shouldn't.

herrbischoff avatar Mar 24 '22 09:03 herrbischoff

Thanks for the fix! I merged your change and will release it soon

Gioni06 avatar Nov 25 '23 09:11 Gioni06