symfony-docs icon indicating copy to clipboard operation
symfony-docs copied to clipboard

Update event_dispatcher.rst

Open powtac opened this issue 2 years ago • 3 comments

Adding a space before deep links to avoid this kind of rendering a github icon next to a character. grafik

powtac avatar Oct 18 '23 13:10 powtac

It looks like some bot detects a space at a line ending as error. In this case it is not.

powtac avatar Oct 18 '23 14:10 powtac

I'd say this is a minor bug of the browser used to read the docs.

The content has a white space and it's rendered as expected:

But, when using the max width allowed for the content, the entire link content doesn't fit the space available. In my case, the browser just displays a gap:

I'm not sure we can do anything to fix this 🤔

javiereguiluz avatar Oct 19 '23 09:10 javiereguiluz

Thanks of reporting this rendering issue, @powtac!

This bug is reproducible on Firefox, but it indeed appears like something we cannot fix the line break after the GitHub icon. Firefox will line-break in between a pseudo element and the actual content, unless we disable word breaks (but that means that we never line-break within a link, which seems too aggressive to me).

@javiereguiluz you can change the CSS to not use the background-image trick, but instead use the url() function as content (this is valid). This at least fixes the missing whitespace before the icon:

body[data-is-doc-page] .ui-prose a[href^="https://github.com"]::before, body[data-is-doc-page] .page-content .content a[href^="https://github.com"]::before {
  content: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBmaWxsPSIjMjQyOTJFIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwYTE2IDE2IDAgMCAwLTUgMzEuMmMuNy4xIDEtLjQgMS0uOHYtM2MtNCAuOC01LTEtNS40LTEuOC0uMS0uNS0xLTItMS42LTIuMy0uNi0uMy0xLjQtMSAwLTEgMS4yIDAgMi4xIDEuMSAyLjQgMS42IDEuNSAyLjQgMy44IDEuNyA0LjcgMS4zLjEtMSAuNi0xLjcgMS0yLjEtMy41LS40LTcuMy0xLjgtNy4zLTggMC0xLjcuNy0zLjEgMS43LTQuMi0uMi0uNC0uNy0yIC4xLTQuMyAwIDAgMS40LS40IDQuNCAxLjdhMTQuOCAxNC44IDAgMCAxIDggMGMzLjEtMi4xIDQuNC0xLjcgNC40LTEuNyAxIDIuMi40IDMuOS4yIDQuM2E2IDYgMCAwIDEgMS42IDQuM2MwIDYuMS0zLjcgNy41LTcuMyA3LjkuNi41IDEuMSAxLjQgMS4xIDN2NC4zYzAgLjQuMyAxIDEuMS44QTE2IDE2IDAgMCAwIDE2IDBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
  margin-right: .25em; /* 1/4th em is roughly the size of a normal space character */
}

I prefer this over adding trailing whitespaces before links throughout the documentation sources.

wouterj avatar Feb 19 '24 21:02 wouterj