Add vertical alignment control

[VM81]

While there is a user friendly option to align text horizontally through modifiers, there is no way to align text vertically(as far as I know) without using CSS. I'd like to propose additional aliments to top/bottom of main text. Right now it is very hard to have a typographically sound text layouts, without customizing the page through code, because the variable text length leads to a different height starting point, thus (mis)leading the eye on page change. I would propose for the main text to be aligned up-left, in line with the left aligned header and for the forks to be aligned to the bottom of page, thus giving a more unified look after page change.

[philsurette]

I second this request. I've been adding reveal links to my story that add more text which IMO should result in the text being inserted to the right of where the existing text had started. But because the article element is center-aligned, when the new text is revealed the whole section often moves up the page as well, because I've added a line so things move up half a line and down half a line,

[mielikki]

(1) Maybe change the title to something like "add vertical alignment control" to be more specific?

(2) Is it something you want set for the whole story (e.g., with something like config.style.page) or something you want on a per-passage basis? In the spirit of chapbook simplicity I think a story setting would be better. It might seem strange if some passages were centered and some top-aligned.

(3) Are you asking for the equivalent of putting the following in the "Edit Story Stylesheet" section? (I'm not suggesting that is the solution, I'm just making sure I understand the request. This is something I wanted to do as well, for similar reasons as philsurette and this was how I did it.)

#page article {
    align-items: start;
}

[philsurette]

(2) Is it something you want set for the whole story

For me yes this is something I want for the whole story.

(3) Are you asking for the equivalent of putting the following in the "Edit Story Stylesheet" section?

I guess you mean this section, yeah updating that would do it for most people... but I'm writing Twee directly so this is the relevant section for me. The final product that worked for me was to add this section to my start.twee file:

:: UserStylesheet[stylesheet]
#page article {
    align-items: start;
}

I guess I was looking for documentation on how to do that in the Chapbook docs. Anyway, problem solved!

[VM81]

(1) Maybe change the title to something like "add vertical alignment control" to be more specific?

Done (2) Is it something you want set for the whole story (e.g., with something like config.style.page) or something you want on a per-passage basis? In the spirit of chapbook simplicity I think a story setting would be better. It might seem strange if some passages were centered and some top-aligned.

My idea was to be on a per-passage basis, similar to the horizontal alignment commands- it wouldn't make much sense from usability standpoint to move text horizontally with simple commands within passages, but to edit config.style.page to move it horizontally. Other than that you're right- most people won't need to change it mid story. (3) Are you asking for the equivalent of putting the following in the "Edit Story Stylesheet" section? (I'm not suggesting that is the solution, I'm just making sure I understand the request. This is something I wanted to do as well, for similar reasons as philsurette and this was how I did it.)

#page article {
  align-items: start;
}

This is an OK solution(easy enough) to half the problem, as long as someone puts it in the Cookbook. I don't think most Chapbook users would be interested in learning CSS to find it themselves. If someone can suggest a similarly easy way to align the forks to the bottom of the article and put that in the documentation too, I'd consider my request fulfilled.

[mielikki]

FWIW, klembot just posted this in the discord server:

config.style.page.verticalAlign: 'top' to top-align the text I forgot to put this in the docs!

I think you could put that in a page and it would affect that page (and all subsequent pages). So you'd have to put the alignment setting on every page if you wanted some pages one way and other pages the other way.

Still not the simple modifiers you were looking for, but it is a step better than the CSS.