I’m always frustrated when I go to look at a dataview table and everything is scrunched because of readable line width, because I have to go turn off readable line width, which doesn’t have a toggle, plus sometimes my dataview tables are in files that have text that I would like to still be a readable line width.
Proposed solution
It would be cool if themes could automatically made tables go beyond the max width, for example:
I deleted my wall of text I posted during toward the end of the brainstorming I had on this. Here is what I currently use, as a CSS workaround, for tables with multi sentence columns. (It would still be nice if Obsidian had some max width per card ability or dataview supported some features for wide charts.)
I have 3 CSS snippets I include in the .obsidian/snippits folder turned on in Settings > Appearance Menu > CSS Snippits section. Note these snippets mostly affect how things view in the reading view but not the editing view.
With these snippets I can make a table display as wide as possible or at least a min width.
Makes ONLY THE CARD tagged with this CSS full width in display view
cassclass: width-full
/* Make card 100% width if it has the following starting YAML tag
(Works on mobile as it makes the card the width of the screen.)
---
cssclass: width-full
---
*/
.width-full.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
.markdown-source-view.is-readable-line-width .CodeMirror{
max-width:100%;
}
This CSS class makes the table a min width so on thin views its a small horizontal scroll rather than a massive vertical scroll due to text cells.
cssclass: dataview-wide
/* Apply set wider width to dataview tables only in a card in reading mode only on pages with starting page yaml
---
cssclass: dataview-wide
---
*/
.dataview-wide.markdown-preview-view.is-readable-line-width
.block-language-dataview {
min-width: 70rem !important;
/* margin-left: -25rem; */
/* width: 100rem !important; */
}
.dataview-wide.markdown-preview-view.is-readable-line-width
.block-language-dataviewjs {
min-width: 70rem !important;
/* margin-left: -25rem; */
/* width: 100rem !important; */
}
More optional grabbed fully from someone’s recommendation, this CSS class will reduce the font size of all tables slightly so less wrapping occurs.
There’s a request (almost 2.5 years old) for a hotkey which toggles “readable line length” on and off, which would be a useful stop-gap.
In another thread requesting a hotkey or button to do the same thing, users write that the plug-ins Smarter Markdown Hotkeys and hotkeysplus make “readable line length” addressable by a hotkey. @Archie in the first thread uses MySnippets to toggle a CSS snippet controlling line length on and off.
My current work-around is similar to Archie’s. I use a macro manager (Keyboard Maestro, but Alfred and AutoHotkey would work just as well) to invoke, by hotkey, a shell script which ‘toggles’ a single-purpose CSS snippet on and off:
#!/bin/zsh
snippet="path/to/obsidian-vault/.obsidian/snippets/measure.css"
template="path/to/templates-directory/measure.css"
if [[ -s "$snippet" ]]; then
: > "$snippet"
else
cat "$template" > "$snippet"
fi
If the snippet contains text, the script empties it; otherwise, it writes the contents of the template file to the snippet file. Because Obsidian immediately refreshes on changes to CSS snippets, the effect is to toggle line length.
The CSS I’m using is:
.inline-title {
width: var(--file-line-width);
margin-left: auto !important;
margin-right: auto !important;
}
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content {
max-width: 100% !important;
}
.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
margin-left: auto !important;
margin-right: auto !important;
}
This keeps text and the inline title centred with a comfortable measure, but allows Dataview output and images to expand to the full width of the window (in source view). The result is unsatisfactory where Dataview output or images are substantially narrower than the window (they’re aligned against the left edge of the window, out of flow with the text), but in the case of notes interspersed with wide tables, it produces exactly the result pictured in @EleanorKonik’s mock-up above.
I have a CSS snippet solution. The way it works is it resets the max-width applied by the display setting Readable line length and applies the setting to the content of the children of this container except any dataview and markdown tables by using the CSS :not selector.
Nb. this solution cannot ‘detect’ the state of the Readable line length setting. Since this CSS is an override applied to the children elements AND var(--file-line-width) is always the same value, the readable line length will always be on if this snippet is on.
/* reset readable line length on reading view container */
.markdown-preview-sizer{
max-width:100%!important;/* reset max-width */
}
/* make container elements conform to readable line length except for dataview and markdown table elements */
.markdown-preview-sizer > div > *:not(.block-language-dataview):not(table){
max-width: var(--file-line-width)!important;
margin-left: auto!important;/* comment or remove this line to left-align all content */
margin-right: auto!important;
}
/* stretch markdown tables to full width */
.markdown-preview-sizer > div > table{
width: 100%!important;
}
