I’m in the process of developing a theme centered around playing TTRPG’s, and I’m constantly running into issues with the rendering of multi column layouts and large dynamic elements.
Use case or problem
The current rendering of a page preview causes numerable different issues when:
- The page has more than 1 column
- A plugin is trying to render an element larger than the viewport
- You try to print or export your files to a more definitive format (e.g. pdf, html, png)
Most of the issues stem from the multi-column layout, since the layout of the current view is dependent on the ene documentirt. Currently if you have a larger file (larger than 5~10 pages) the document layout resets constantly if you scroll. This also takes a huge on toll on performance, as the page has to be repainted constantly, and text keeps disappearing and reappearing.
Proposed solution
An option, a toggle or a variable to disable the lazy rendering and switch to ‘normal’ rendering (sorry if the terminology is confusing, i hope my point still comes across). Or a way to emulate the page being embedded without having to create a second document for every document in my vault.
Current workaround (optional)
You can completely fix this issue by wrapping the document some other element, could be callout or blockquote, and applying “display: contents” on that wrapping element, and the parent div.
If you don’t want to rewrite your css, you can also embed a document in another document, than apply the following css:
body div.markdown-preview-sizer > div:has(.internal-embed),
body div.markdown-preview-sizer > div:has(.markdown-embed) > p,
body div.markdown-preview-sizer > div:has(.markdown-embed) > p > span.markdown-embed,
body div.markdown-preview-sizer > div:has(.markdown-embed) > p > span.markdown-embed > div.markdown-embed-content,
body div.markdown-preview-sizer > div:has(.markdown-embed) > p > span.markdown-embed > div.markdown-embed-content > div.markdown-preview-view,
body div.markdown-preview-sizer > div:has(.markdown-embed) > p > span.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-sizer {
display: contents !important }
All this does is disable all the html between the main page and the embedded page, and by using this you fix all the issues with the jumpy layout and scroll. On my pc and phone it also improves the performance hit by miles, but that may be depending on the use case.