-
Notifications
You must be signed in to change notification settings - Fork 12.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix table in docblocks #88742
Fix table in docblocks #88742
Conversation
@@ -522,6 +522,11 @@ nav.sub { | |||
position: relative; | |||
} | |||
|
|||
.docblock > * { | |||
max-width: 100%; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is actually unnecessary. According to the MDN, overflow: auto
should introduce new block formatting context by itself. So if the element this applies to is a block element, then max-width: 100%
is not needed. If the element this applies to is an inline element, then max-width
is not useful because it does not apply to the non-replaced inline elements.
So I think we just need
.docblock > * {
overflow-x: auto;
}
Or maybe
.docblock > * {
display: block;
overflow-x: auto;
}
if we want to be absolutely sure, but this is likely not necessary since inline elements should be wrapped with <p></p>
already.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did it for images actually. :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldn't images be wrapped within <p></p>
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not always, for example:
//! <img src="whatever.png">
//!
//! ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
First one isn't but the second one is. The beauty of markdown. :D
📌 Commit 021b8ff has been approved by |
🌲 The tree is currently closed for pull requests below priority 100. This pull request will be tested once the tree is reopened. |
…arth Rollup of 15 pull requests Successful merges: - rust-lang#85200 (Ignore derived Clone and Debug implementations during dead code analysis) - rust-lang#86165 (Add proc_macro::Span::{before, after}.) - rust-lang#87088 (Fix stray notes when the source code is not available) - rust-lang#87441 (Emit suggestion when passing byte literal to format macro) - rust-lang#88546 (Emit proper errors when on missing closure braces) - rust-lang#88578 (fix(rustc): suggest `items` be borrowed in `for i in items[x..]`) - rust-lang#88632 (Fix issues with Markdown summary options) - rust-lang#88639 (rustdoc: Fix ICE with `doc(hidden)` on tuple variant fields) - rust-lang#88667 (Tweak `write_fmt` doc.) - rust-lang#88720 (Rustdoc coverage fields count) - rust-lang#88732 (RustWrapper: avoid deleted unclear attribute methods) - rust-lang#88742 (Fix table in docblocks) - rust-lang#88776 (Workaround blink/chromium grid layout limitation of 1000 rows) - rust-lang#88807 (Fix typo in docs for iterators) - rust-lang#88812 (Fix typo `option` -> `options`.) Failed merges: r? `@ghost` `@rustbot` modify labels: rollup
* The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in rust-lang#87230 to make the table side-scrolling, but this same issue was doubly fixed in rust-lang#88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
…-css, r=GuillaumeGomez rustdoc: clean up docblock table CSS # Preview http://notriddle.com/notriddle-rustdoc-demos/table-2/test_dingus/fn.test.html # Before ![image](https://user-images.githubusercontent.com/1593513/206364287-1b80eaaf-2e0e-4138-8b56-4aa8ff39abac.png) # After ![image](https://user-images.githubusercontent.com/1593513/206364209-d287d165-31be-4de1-9b43-05b35ce2a86b.png) # Details * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in rust-lang#87230 to make the table side-scrolling, but this same issue was doubly fixed in rust-lang#88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Markdown.20table.20styling [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
…-css, r=GuillaumeGomez rustdoc: clean up docblock table CSS # Preview http://notriddle.com/notriddle-rustdoc-demos/table-2/test_dingus/fn.test.html # Before ![image](https://user-images.githubusercontent.com/1593513/206364287-1b80eaaf-2e0e-4138-8b56-4aa8ff39abac.png) # After ![image](https://user-images.githubusercontent.com/1593513/206364209-d287d165-31be-4de1-9b43-05b35ce2a86b.png) # Details * The rule `display: block` had no noticeable effect. Technically, because markdown tables have a tbody and thead, they get wrapped in an [anonymous table box] in the CSS tree, nested within the `<table>` element's block layout box. This rule was added in rust-lang#87230 to make the table side-scrolling, but this same issue was doubly fixed in rust-lang#88742 by wrapping it in an explicit `<div>` tag. Since accessibility advocates recommend the wrapper div over marking the table as `display: block`, we'll stick with that. https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html * The rule `width: calc(100% - 2px)` had no visible effect, because the anonymous table box was not affected. * The style is tweaked to basically be the same style GitHub uses. In particular, it adds zebra stripes, and removes dotted borders. https://rust-lang.zulipchat.com/#narrow/stream/266220-rustdoc/topic/Markdown.20table.20styling [anonymous table box]: https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
"Overwrite" of #88702.
Instead of adding a z-index to the sidebar (which only hides the issue, doesn't fix it), I wrap
<table>
elements inside a<div>
and limit all chidren of.docblock
elements' width to prevent having the scrollbar on the whole doc block.Thanks @nbdd0121 for
overflow-x: auto;
. ;)r? @notriddle