Fix line height spacing for multiline code elements

alphagov / tech-docs-gem

Gem to distribute the tech docs project

https://tdt-documentation.london.cloudapps.digital/

MIT License

15 stars 38 forks source link

Fix line height spacing for multiline code elements #162

Closed tombye closed 4 years ago

tombye commented 4 years ago

Text in our <code> elements is larger than the default Transport font on OSX, due to it using the Monaco font. This creates a taller formatting box for each line of text it has.

We set a smaller font-size, and line-height in <td>s. This works for Transport but text in <code> sections appears squashed vertically.

This sets the line-height for <code> to match that of content outside tables, to stop it squashing up.

This has been tested with Consolas (the font Windows uses for <code>) and all other fallbacks.

Here's an idea of the changes this introduces, viewed on OSX Firefox.

Before

After

NickColley commented 4 years ago

I wonder if this is related: https://github.com/alphagov/tech-docs-gem/pull/131

tombye commented 4 years ago

What impact does this have to code elements within paragraphs?

It seems to work OK:

(from Notify's REST API docs.)

Looks like the line-height leaves enough space for the padding on the top and bottom.

NickColley commented 4 years ago

I'm still wondering if the reason this has broken is because the relative font units is not working in that area for some reason 🤔

The text looks a lot bigger than the surrounding regular text.

NickColley commented 4 years ago

Would you mind adding an example to: http://127.0.0.1:4567/code.html#code-examples please?

tombye commented 4 years ago

I'm still wondering if the reason this has broken is because the relative font units is not working in that area for some reason 🤔

The text looks a lot bigger than the surrounding regular text.

On smaller screens, the <code> is larger than the normal table text, 15px vs 14px, whatever the monospace font-family. On larger screens, they're both 16px.

I did some testing on the differences in vertical size between the monospace font-families and New Transport.

I measured the height from the ascender to the descender on various combinations, all at 16px, and found:

Monaco and New Transport at 16px were roughly the same
Consolas and New Transport showed some difference with Consolas being about 3px smaller
monospace was the same as Consolas

All was on Firefox on OSX.

NickColley commented 4 years ago

I'll try and review this when I get some free time, please ping me if I don't.

tombye commented 4 years ago

I'll try and review this when I get some free time, please ping me if I don't.

Will do 👍