Optional Full-width note (CSS)

[g_hz]

Hi !

First contribution here. A little CSS snippet so you can have some notes with full-width just by adding a CSS class into the yaml frontmatter. (It just affects the preview.)

Required: disable the Options > Editor > Readble line breaks parameters.

The css snipset :
optional-full-width.css (220 Bytes)

.CodeMirror-lines, .CodeMirror-selected,  .markdown-preview-section {
  max-width: 700px;
  margin: auto;
}

.full-width .markdown-preview-section {
	max-width: 100% !important;
}

Yaml frontmatter: Just add cssclass: full-width if you want the note to be full-size.

[SilvioDylan]

Just what I needed. Thanks a bunch!

[Pwnstar]

I think this should be the default

[Akasiek]

Thank you for this snippet. Although I have a problem with it. When in edit view, all pages are full width - not just those that have css class.

[ariehen]

This snippet is very old.

Can you share what theme you are using and what you want to do? e.g, full width on all notes, 800px wide on all notes, full width only on certain notes, etc.

[Akasiek]

Thank you for taking interest in my reply.
I’m using AnuPpuccin. I wanted to have a css class than when given to a file it makes it full width. It should be full width in edit mode and read mode. Otherwise files should look like before.

[ariehen]

Give this a try:

.full-width {
    --file-line-width: 100%;
}

And in the YAML of the note(s) you want to change:

---
cssclasses: full-width
---

[Akasiek]

@ariehen

.full-width {
    --file-line-width: 100%;
}

Works perfectly! Thank you so much

[BrigadierG]

The above did not work for me. The variable is not --file-line-width from what I see, it is just --line-width

.w-full {
    --line-width: 999rem;
}

[ariehen]

@BrigadierG

The variable is not --file-line-width from what I see, it is just --line-width

--file-line-width is indeed the default property that works with most themes. The theme you are using may define it differently.

[BrigadierG]

This turned out to be the case - Minimal theme uses --line-width, default is --file-line-width

[ariehen]

Minimal has its own helper classes built in, so you could use wide or max for a cssclass as well (with no custom css snippet).

[bonka]

I figured it out but it only works in edit mode, and I can’t figure out how to make it work also in reading mode. This applies to all themes, even the Minimal theme @ariehen mentions.

[ariehen]

@bonka

I figured it out but it only works in edit mode, and I can’t figure out how to make it work also in reading mode.

I don’t know the CSS you are using, but --file-line-width (or --line-width for Minimal) takes care of all three viewing modes, (Source, Live Preview, and Reading), without a lot of fuss.

If you wanted a snippet that works for most themes, including Minimal, something like this should do. (The !important is in there to take care of a theme or two that sets a custom file-line-width on the body.)

/* set a custom readable line length for all notes */
body {
    --custom-line-width: 75rem; /* <- change this */
    --file-line-width: var(--custom-line-width) !important;
}
body.minimal-theme.minimal-theme {
    --line-width: var(--custom-line-width);
}

or on a per-note basis with a cssclass of wide-view (for example):

/* set a custom readable line length for notes with a cssclass of <wide-view> */
.wide-view {
    --custom-line-width: 75rem; /* <- change this */
    --file-line-width: var(--custom-line-width);
}
body.minimal-theme.minimal-theme .wide-view {
    --line-width: var(--custom-line-width);
}

Tested with the default, Minimal, Shimmering Focus, Prism, Everforest Enchanted, etc., themes.

NOTE: Settings > Editor → Readable line length needs to be enabled for these to work.

[bonka]

Ah, thanks a lot for this!

I was trying to make my own implementation using max-width, but couldn’t manage to get rid of an annoying scrollbar that hugged the text. The use of custom-line-width is far better and it is even working across all themes. Thanks!

[2fifty6]

So I’m using the wide-view cssclass to good effect for an ultra-wide window use case. However, I’m finding it still doesn’t get as wide as when I turn off the “readable line length” option in Settings. How do I get that last little bit of width that disabling that option delivers?

For example, below are two screenshots of the same demo window. The wide-view cssclass is active in both cases. The second also has “readable line length” disabled. What I want is the additional content width of that second screenshot but only for the wide-view cssclass. There must be more at play here than just --file-line-width!

[ariehen]

If you switch to the default theme, using this:

.wide-view {
    --file-line-width: 100%;
}

should be identical to having Readable Line Length disabled.

---

I immediately saw the difference using Minimal, so I’m assuming you are using it (if it’s not Minimal, let us know what theme it is). Using a 100% in the original snippet, it seems Minimal has a big margin for the inline-title, metadata-container, each line, etc.

Minimal →

Default theme →

A max-width is set for the inline-title, metadata-container, main body, and so on:

So you could add that max-width to the original snippet to override Minimal and see how it goes. It’s working for me with Minimal, and as it’s isolated to only the notes with a wide-view cssclass, I don’t see any immediate issues in any other areas.

.wide-view {
    --custom-line-width: 100%; /* <- change this */
    --file-line-width: var(--custom-line-width);
}

body.minimal-theme.minimal-theme .wide-view {
    --line-width: var(--custom-line-width);
    --max-width: 95%;
}

[2fifty6]

Yup, I am indeed using the Minimal theme, and adding that max-width parameter did the trick. Thanks!

[angelmarauder]

Signed up to answer here:

There is an options in the menu under Editor → Display for
“readable line length”

[ariehen]

That setting is for all notes in a vault. This topic is about keeping readable line length for most notes, but only changing a few that you want wide using CSS and cssclasses.