writemonkey / wm3

165 stars 5 forks source link

Line Width unexpected behaviour #165

Open atoav opened 6 years ago

atoav commented 6 years ago

When you set a certain line width and resize the window, the line width stays the same relative to the editor width – while I think it would be more desireable to make it stay the same length in characters (unless the textarea (+some padding) gets too small). This is the way how you would assure readability in a typographic setting (see this article.

Because as a writer (and reader) I am not interested in some abstract measure of relation between editor window and text (unless the window is too small), but I am interested into the length of the line in characters.

And right now, if you change the window size this length changes, which means you have to correct it whenever you change the window (put it on another monitor etc).

In a webdesign context I would usually do this by

.someparentelement p{
     max-width: 20em;
}
thor commented 5 years ago

This is unfortunate if you've used plugins such as Goyo in neovim, or if you're used to setting the text width itself to a fixed distance. Either I have to work in the same setting (full screen or maximised window), or I have to readjust the settings all the time.

Even if #205 was not an issue, you would still have to readjust the width if you went from windowed to full screen, because the width would be broader due to keeping with the margins and not its own width.

EDIT: A suggestion is to use specify the width in increments of 10 by adjusting width on editor-placeholder and setting width: 80ch (for example).

thor commented 5 years ago

This really bothered me, and so:

If the characters' size are to remain constant, then the font size must affect the same wrapping container that has the width specified by the width of its characters. In other words, .editor-placeholder must have the same font size as CodeMirror-wrap, or that wrap needs to be the main point.

Since I'm lazy, my "fix" for this when editing in the developer tools, thus without checking at all if it works from a fresh start or what the consequences may be, but which at least works even with the distraction-free mode changing the font size, is changing setTextAreaWidth to the following:

function setTextAreaWidth(value, isDelta) {
    // too much hassle to get the computed value, use the stored one
    var w = parseInt(localStorage['VIEWPORT_CURRENT_WIDTH']);
    var nw = (isDelta) ? w + value : value;
    if (nw <= 20) {
        nw = 20;
    }
    // use "ch" units rather than percentage
    $(".editor-placeholder").css("width", nw + "ch");
    $(".editor-placeholder").css('font-family', $(".CodeMirror").css('font-family'));
    cm.scrollIntoView(null, cm.getWrapperElement().offsetHeight / 3);
    localStorage['VIEWPORT_CURRENT_WIDTH'] = nw;
    cm.refresh();
}

Then, remove setTextAreaWidth(W, false) from function resZoom(). setResetZoomDefault needs an update too, but I haven't looked at it. It gets kind of messy, but it's the gist. Note that the font size is a pickle too, because you need to use the same font for both units. Additionally, now you can make the size larger than the container, so there's no bounds-checking, because it was partially pointless.