Vertical title for notes after v0.16

Help
1

Hi everyone,

It’s my first time here but it won’t be the last one. I discovered Obsidian few months ago and I’m really in love with this amazing tool. So big thank you to the team.

I have a problem that I can’t fix alone.

Since the last update, the pluggin Sliding Panes (Andy’s Mode) don’t work anymore. I understand that since the last update, Sliding Panes (now called “Stacked Tabs”) are already built in.

But there is something that is not built in and which I find very useful: it’s the vertical title for notes.

Do you know how can I get it back since the last update?

Thank you!

2 
.workspace-tabs.mod-stacked .workspace-tab-header-inner-title {
  text-orientation: upright;
}

Source: https://www.webtips.dev/webtips/css/vertically-write-text-with-css after being clued in to the general idea by Discord and learning a bit at text-orientation - CSS: Cascading Style Sheets | MDN and writing-mode - CSS: Cascading Style Sheets | MDN

Thanks! I’ve been wanting to try vertical titles but hadn’t gotten around to figuring out how yet.

EDIT: Added .workspace-tabs.mod-stacked to specifically target stacked tabs per @Olondre 's suggestion below.

2 Likes
3

If I understand correctly, I have the same issue as Growth_Fanatic and this answer doesn’t address what is being asked.

The issue is not to have vertical text appearing in the note, but rather to have the title appear on the left side of the note, in vertical.

This was a useful feature that was present in Andy’s mode that has now disappeared with the “Stacked Tabs” feature.

4

I prefer mixed myself, but text-orientation: upright produces spines that look like this:

![2|690x494]

Is that not what you’re looking for? I saw on discord some form of upright or mixed will be supported natively in the next version of Obsidian so you can use the snippet above or just wait a bit.

5

That’s exactly what the snippet I posted does. Try it!

6

That Snippet works like a charm. Thanks for sharing! I’m probably not going to use it, but good to have the option.

If you also want to change something like the font-size in the stack tabs mode make sure to add “.workspace-tabs.mod-stacked” in front, otherwise it will also change the look in the normal tab mode.

e.g.:

.workspace-tabs.mod-stacked .workspace-tab-header-inner-title {
text-orientation: upright;
font-size: 16px !important;
}

2 Likes
7

Thank you for your anwsers.

I tried to add this Snippet but nothing had changed (it’s the first time that I try to add a CSS snippet).

I don’t understand what doesn’t work.

1
11492×314 42.2 KB

2
21464×448 26.1 KB

3
32504×1078 57.1 KB

8

Did you deactivate the “Sliding Panes (Andy’s Mode)” Plugin?
Maybe a theme interferes.
Otherwise try this one:

.workspace-tabs.mod-stacked .workspace-tab-header-inner-title {
text-orientation: upright !important;
}
9

Yes I deactivated “Sliding Panes (Andy’s Mode)” Plugin.

Thank you for the other snippet. But even this one doesn’t work. I don’t know why.

10

What about your Installer Version? Do you only use the “Automatic Update” function?
You can see you current Installer Version in Settings > About > below Current Version

If it’s not up to date, download the v1.0.0 Installer. (Backup your Vaults before doing this, just in case)

11

I just looked and I do have the latest version.

Capture d’écran 2022-10-17 à 18.49.37

12

Yes with Automatic Updates, but your Installer Version is 0.15.9
I don’t know if this will help, but it’s worth a try.

13

Try restarting Obsidian, if you haven’t already? I’m not sure that’s needed, but it’s worth a try.

14

I have disabled and re-enabled automatic updates but nothing has changed @Olondre

So yes I quit Obsidian several times and I even restarted my Mac but nothing changed @CawlinTeffid . I really don’t understand it’s weird.

15

That’s not what I meant when i talked about the Installer Version.
Your process would be to go to https://obsidian.md/ → download the new installer for v.1.0.0 and Install it. Then you’ll be on Version 1.0.0 (Installer 1.0.0) instead of Version 1.0.0 (Installer 0.15.9).

As I said, I have no idea if this will fix your problem, but it’s worth a try. Remember to make a Backup of your Vault(s) before Installing, just as a precaution.

17

I liked how the Sliding Pane handled the title.

I don’t want upright, I just want the direction to be flipped. I don’t know how to use CSS. I tried the following snippet but it moves the file name to the bottom.

.workspace-tab-header-inner-title {
	writing-mode: vertical-lr !important;
	text-orientation: sideways !important;
	transform: rotate(180deg) !important;
}

I hope they come up with an option to flip the direction

18

Try adding text-align: right; to what you already have.

.workspace-tab-header-inner-title {
	writing-mode: vertical-lr !important;
	text-orientation: sideways !important;
	transform: rotate(180deg) !important;
	text-align: right;
}
1 Like
19

image
I’m just going to assume the UI will never be the same.

20

You need to add .workspace-tabs.mod-stacked to the CSS, if you only want to effect the “Stack Tabs” mode.
Like so: .workspace-tabs.mod-stacked .workspace-tab-header-inner-title {

2 Likes
21

That does nothing for me. Looking at the Inspection screen workspace-tabs.mod-stacked doesn’t appear.
image