Refguide on mobile to use screen space optimally #3019
Conversation
|
@tmyksj thanks a bunch for the PR 👍 On my phone I'm still seeing smaller paragraphs for text and code snippet compared to tables like the metrics or kotlin section tables 😢 |
|
NB: on Android, Chrome seems to be behaving a bit better. I'm usually using Firefox Mobile. |
|
Ummm, I saw Edge, FireFox on Android but I cannot reproduce it... |
This commit fixes overflow of `code`, `attribution` in portrait mode.
|
I changed some css properties. I think it fixes when width >= amount 300px. For more small width, I think we also need to expand content area. But < 300px is minor and I think it isn't core of this #issue. So, I think other #issue and RR are desirable. (with improvement of readability, such as table, code block. e.g., introducing of horizontal scroll may make it more readable.) @simonbasle I would appreciate if you could re-review this. |
|
yeah this is looking better 👍 |
simonbasle
changed the title
|
Thank you very much 🙇 |
2 participants
Refs #3011
The reason which reference guide not using screen space optimally in portrait mode is normally from table and text overflow. This issue is also occur in a bit large window, such as width less than amount 1000px.
Below are the factors and how to resolve it:
header overflow
The header which has long word makes text overflow. e.g., "Sinks.many().unicast().onBackpressureBuffer(args?)".
So, add property
overflow-wrap: break-word.paragraph overflow
The long word in a paragraph makes text overflow.
So, add property
overflow-wrap: break-word.code in a patagraph overflow
To set
white-space: nowrapcauses overflow in narrow window because it blocks to break code text.So, set it only when width >= 1280px.
table overflow (
.tableblock,.admonitionblock,.colist)The table width depends on the table content. The width will be larger than
100%if its content has wide width. So, this cause overflow.Thus, set some properties to not have wide width, to not overflow.
refs:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Also, I think it should be desirable to expand content area (and it seems separated #issue)...