Code tags are shifted up in Laravel documentation

[SemiKebab]

In Laravel documentation, for example https://laravel.com/docs/8.x#initial-configuration

The "code" tags are a bit too tall (thus increasing the line height) and more importantly, their text content is considerably shifted up. (I can assure you that makes the documentation much more tedious to read!)
I tried with Chrome and Firefox 88, they don't have the issue.

FYI, the code tags get normal by either:

• disabling the CSS declaration "display: inline-flex" (but according to Firefox's inspector, that makes the "max-width: 100%" ineffective)
• disabling the CSS declaration "overflow-x: auto"

[Moonchild]

As far as I know we are doing this exactly in accordance with the CSS spec.

Making the display inline-flex means you are creating a flex container around the content.
A flex container is a block element.
This means that by default its baseline is the baseline of the text it is inserted to (exactly like inline-block behaves).

[SemiKebab]

Indeed, it's possible that the Laravel website uses horrible CSS rules, that just happen to render right on Firefox and Chrome at the time being.

FYI, on IE11 the website is completely broken.

[Moonchild]

it's possible that the Laravel website uses horrible CSS rules

I'm not sure if I would call them horrible, but they certainly are illogical and aren't aiming for anything but Chrome's quirks, by the looks of it.
In fact I'm not even sure why they want to make <code> tags be a flex container anyway. Code HTML tags are for text formatting, not to contain any complex layout elements -- so creating flex containers from those elements makes no sense for starters.

Also, it's not just "possible" -- I made the analysis for a reason; there's no question that the CSS results in what you perceive as a "bug" but in fact is doing exactly what it should.

[vannilla]

In the meantime a workaround is to use the following stylesheet with something like Stylem:

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://laravel.com/docs/") {
  .docs_main :not(pre) > code {
    display: initial;
  }
}

The real fix is to ask the Laravel developers to reconsider the use of inline-flex in their CSS rules, especially as this stylesheet will stop working if they change even just a class name.

[SemiKebab]

I found what seems to be the precise purpose of that CSS:
If a code snippet is too long, it would be put in a scrollbox that is just the width of the main content (the <p> that are about about 640px width).

I tried to achieve the same effect using different CSS, without success.
(FYI, "display: inline-block" seems to render the same as "display: inline-flex", maybe it would be worth using it, as it's a more regular CSS for the same result)

The best I could achieve is to add a "vertical-align: middle" declaration to these <code> tags.
Doing so, the vertical alignement is exactly as expected.
The only remaining defect is that the "grey backgrounds" are still a bit taller (on the bottom) than they should be, but it has no impact on the line heights that are also exactly as expected.

[SemiKebab]

Also, I just found where this CSS has been introduced: Fix the code tag overflow on mobile resolution (and the corresponding Pull Request). (then, followed up by this subsequent PR)

[SemiKebab]

Pull Request created for Laravel documentation: https://github.com/laravel/laravel.com-next/pull/175