Obsidian CSS snippet for subtly indenting line wraps.

obsidian-wrap-indent.css

/*
An Obsidian CSS snippet to indent wrapped lines by half a character width.
Applies to Editing View (whether Live Preview or Source).

Known issues:
- Skips lines with aliased links, because they count as children.
- Does not apply to Reading View, because lines separated by a single line break become </br>-separated free text under a single <p>, thus the indentation is erroneously applied to all the lines in the block.
*/

:root {
	--wrap-indent: 0.5ch;
}


/* Select non-empty elements that do not have children. */
body
> div.app-container
> div.horizontal-main-container
div.view-content
div.cm-contentContainer
> div.cm-content.cm-lineWrapping
> div.cm-line:not(:empty):not(:has(*))

/* Select non-empty paragraphs in callouts. 
Paragraphs are the bottom children of callouts, so this naturally handles lists (makes the 'no children' selector redundant) */
,div.callout-content p:not(:empty)
{      
	text-indent: calc(-1 * var(--wrap-indent));
	margin-left: var(--wrap-indent) !important;
}



/* Original idea was to have a visual indentation mark.
I couldn't manipulate the wrapped lines, so I settled for
prefixing the first line with something.
Unforunately, this also marked divs with not a lot of text which don't get wrapped by the browser.
body
	> div.app-container
	> div.horizontal-main-container
	div.view-content
	div.cm-contentContainer
	> div.cm-content.cm-lineWrapping
	> div.cm-line:not(:empty):not(:has(*))::before {
	content: "│ ";
	font-size: calc(var(--font-text-size) * 0.8);
	margin-left: -0.85ch !important;
	color: var(--text-faint);
}
*/