Vertical writing

Thank you for providing such an excellent software.

Are there any plans to make Tropy support vertical writing in the Note field?

I’m assuming you’re referring to supporting languages with vertical lines and not to arbitrarily rotating text elements, right?

We don’t have any immediate plans, but it is definitely something we would like to support, if the community wants it (we would depend on input from native speakers) and if the underlying platform supports it. If you’re interested to evaluate this, you could try this.

  1. Find your user data folder. The easiest way to do this, is to select Help -> Show Log Files and go up one folder (i.e., the user data folder is the one containing the log folder, e.g., on macOS this would be ~/Library/Application Support/Tropy/).

  2. In the user data folder, create a file style.css with the following content (or something more appropriate):

    .ProseMirror {
    text-orientation: upright;
    writing-mode: vertical-lr;

  3. Restart Tropy

I’ve attached a screenshot what this looks like for me; do you think this the right direction?

Thank you very much for your reply.

I tried the style.css which you told me.

But, Japanese (and some asian) language is written from right to left.
so I modified the css as follows,

.ProseMirror {
writing-mode: vertical-rl;
text-orientation: upright;
margin: 0 auto;

It works out well.

Thanks again.

That’s great to hear! If this approach works, I think we should add an option that allows you to switch between vertical/horizontal for each individual note (with a global preference for the default value).

I’ll add an issue on GitHub to track this.

As you asked for community interest, I would love to be able to switch between vertical and horizontal. I’ll try Nobukikuchi’s code; if I want to switch back to horizontal, can I just delete the newly created style.css from the user data folder? If so, will this impact existing notes, or just the default note-taking format? Thanks for your great work.

It is absolutely safe to create your own style.css: it won’t change the contents of your notes or anything else, but just the looks and the input mode; if anything goes wrong, you can just remove the file and everything will be back to normal.

Out of curiosity, may I ask which language you’re trying to support?

Thank you for your suggestions! I am working with Japanese.

To clarify: If I take some notes in vertical format but then delete the style.css file because I want to take notes on English-language documents horizontally (as in the default mode), what would happen to the existing vertical notes?

With the caveat that I have little experience with the vertical input mode, the note contents themselves would not change, but they would be displayed horizontally and left to right. It would be good to know if such text is still legible or not. The styles above only affect the note pad, not the display of notes in the note list: that means that while you’re writing vertically in the notepad, you would see the content horizontally in the preview section of the note list – this is basically what the note would look like later on if you remove the styles.

Actually, it would be great if you could let us know if the text is OK in the note list (because it would be much harder, to support vertical text there, given the current layout).

@nobukikuchi and your modification works very well for the note pad, and the text is still legible in the note list (see screenshot below). The modification also changes all English-language notes into vertical text in the note pad. Is there a way of enabling both and then switching between vertical and horizontal, depending on the source text language?


If the text is still legible in the note list, that suggests that if you remove the custom styles, your existing notes (entered vertically) should remain legible too. Unfortunately it is not yet possible to switch individual notes, but given your valuable input I think we can go ahead and implement this soon.

We had some concerns regarding scrolling: for Japanese vertical input, would you expect the lines to break if they reach the bottom and, respectively, the note pad to scroll horizontally when you reach the left border?

Here is a silly hack you could use to switch between the writing modes: if you rename style.css to either style-light.css or style-dark.css the styles would only be loaded for the respective theme. This would allow you to switch the note pad’s orientation by changing themes. As I said, that’s just a silly hack, but the screenshot above is really encouraging and I hope we’ll add a way to switch modes for individual notes within the next few weeks.

1 Like

Good questions! I hadn’t thought about breaks, but now that I think about it, I would expect the lines to break once they reach the bottom, so that I can read all notes irrespective of window/screen size. For the case of table of contents, like my example, or poetry, like your screenshot, one could maintain the integrity of the original text through simple line breaks. And yes, I would expect the text to scroll horizontally from right to left.

The silly hack works perfectly, thanks for suggesting it! And thanks for thinking about adding a way to switch modes for individual notes. That would be fantastic.

@AKMS @nobukikuchi it turned out there were some challenges left to make resizing and scrolling work in both writing directions, but we’re about ready to release a version of Tropy which allows you to switch writing modes; you’ll also be able to toggle automatic line wrap, which will be quite helpful for vertical texts, because the current layout affords the notepad less vertical space (in the future, we hope to add a second layout with image and text side by side).

All these features are available from the context menu in the notepad (with an existing note loaded) as you can see in the screenshot below. When you update to Tropy 1.1, please remember to remove your custom styles, to make sure they don’t interfere with the new feature.

Thanks again for your help!