Tasks displayed in a centered column - how to set the Content's max width? (Solved)

Hi,

1. Content’s max-width

Would it be possible to change the content width in full screen mode (maybe using themes?) so that my tasks are centered like the image below :

2. Typewriter mode

Also, I have found typewriter’s mode (see Byword’s implementation) to be really great to dump ideas quick without manual scrolling.

Typewriter’s mode means that the line the user is writing on is always centered vertically.

What do you think about it?
Is that currently possible in one way or another?

thanks

2 Likes

Added to my list. I will need these things for WriteRoom 4 (plan to use same text engine). I’m not sure if I’ll enable for TaskPaper or not, but I’m more likely too now that it’s been requested :smile:.

It’s officially been requested, @jessegrosjean :smile:
Now that I think about it, would you consider not limiting this behavior to fullscreen mode but to windowed mode too?
That’d be very useful especially when using big screens (Taskpaper + another app side by side).

thanks!

1 Like

+1 for Windowed mode too. This would be a great improvement — at the moment my lists feel very cramped to the edges.

+1 for typewriter mode! I love it and use it all the time in my other writing apps and would love to see it implemented in TP.

This would be a key feature for users that focus more on notes than just tasks lists. Would love to see this in the future, also editable via the LESS css file. —Thank you Jesse for such a great update.

Hey @jessegrosjean very happy with the latest update.

Did those requests (centered column and typewriter mode) make it into this release?
I guess typewriter mode did not (yet?), but what about the style sheet? Is the content’s max-width parameter available in any way?

thanks

They should both be in there, though they are a bit hidden and untested.

To enable typewriter mode add this to your stylesheet:

editor {
  typewriter-scroll-percent: 50%;
  bottom-padding-percent: 50%;
}

The second bottom-padding-percent isn’t strictly necessary, but often people like it with typewriter mode.

To enable wrap to column try:

editor {
  editor-wrap-to-column: 80;
  item-wrap-to-column: 66;
}

The editor-wrap-to-column value is for centering… 80 columns is the max with that any text can go and the text view is centered based on that. The item-wrap-to-column is the max with of any particular items text. Making it a bit less then editor-wrap-to-column can be nice because it means when you indent items that don’t automatically change there text wrapping (so view is more stable) unless you indent them fairly deep.

2 Likes

Perfect!
✓ centered column @done
✓ typewriter mode @done

I’ve edited the title for this discussion to “solved” - well, I wish I knew how to do it :slight_smile:

1 Like

Is there a particular reason why these code needs to be at the top of the editor section? When I put this first, it works, but I have tried placing this at the end of the section and it usually crashes my stylesheet. Any ideas?

Not that I can think of, can you post a the stylesheet that’s not working?

Thanks !

Combines well with full-screen view

I created a page with the template. You can check it out there. Here is the link

Customizable template

Have you had a chance to check why does my stylesheet only works when this code is at the beginning of the editor section?

I think I found the problem … near the end of the editor element section (after @message-color) you are missing a ;. That’s allowed for the last item … but if you uncomment the typewriter-scroll-percent: line then the line without the ; is no longer the last line and so the stylesheet fails to parse.

Note … you can actually just delete the message-color line as it is no longer used.

1 Like

I was actually thinking that a 2-column view, with horizontal rather than vertical scrolling, would be just perfect in full-screen mode, no? Or even a 3-column view, with a 23-inch or larger monitor…!

Thanks. You need to develop more apps. I would buy them in a heart beat!

1 Like

gosh this app is literally gold

I am trying for sure!

2 Likes

I am using this but I find that when you have editor-wrap-to-column: 80 enables, it seems to break top-padding-percent: 1%. is there a way to fix this such that i can have it centered but also have a top padding?