Skip to content

fix: Correct CJK/emoji orientation in collapsed columns (#1098) - #1180

Open
BradGroux wants to merge 1 commit into
obsidian-community:mainfrom
BradGroux:fix/collapsed-column-text-rotation-1098
Open

fix: Correct CJK/emoji orientation in collapsed columns (#1098)#1180
BradGroux wants to merge 1 commit into
obsidian-community:mainfrom
BradGroux:fix/collapsed-column-text-rotation-1098

Conversation

@BradGroux

Copy link
Copy Markdown

Problem

When a column (lane) is collapsed horizontally, CJK characters and emoji in the title appear upside-down. Latin characters display correctly because they have no inherent orientation in vertical writing mode, but CJK and emoji glyphs get flipped by the per-element rotate(180deg).

Screenshots from #1098:

  • Chinese characters: upside-down
  • Emoji: rotated incorrectly relative to the title text

Root Cause

The collapsed column styling used:

.kanban-plugin__lane-header-wrapper {
  writing-mode: vertical-lr;
}
.kanban-plugin__lane-title-count,
.kanban-plugin__lane-title-text {
  transform: rotate(180deg);
}

This was a workaround for sideways-lr (not widely supported). The problem is that rotate(180deg) on individual text elements flips CJK/emoji glyphs upside-down since these characters have inherent orientation in vertical writing modes.

Fix

Moved the rotation to the wrapper level and switched writing mode:

.kanban-plugin__lane-header-wrapper {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

vertical-rl + rotate(180deg) on the wrapper achieves the same bottom-to-top reading direction for Latin text while preserving correct glyph orientation for CJK characters and emoji — no per-element rotation needed.

Testing

  • Latin text: reads bottom-to-top ✅ (same as before)
  • CJK characters: correct orientation ✅
  • Emoji: correct orientation ✅
  • Lane title count badge: correct orientation ✅

Fixes #1098

…munity#1098)

Collapsed column titles used `writing-mode: vertical-lr` on the wrapper
with `transform: rotate(180deg)` on individual text elements. This caused
CJK characters and emoji to appear upside-down because the rotation was
applied per-element rather than to the overall text flow.

Changed approach to use `writing-mode: vertical-rl` with
`rotate(180deg)` on the wrapper itself. This achieves the same visual
result for Latin text (reading bottom-to-top) while preserving correct
orientation for CJK characters, emoji, and other non-Latin scripts.

Fixes obsidian-community#1098
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: In boardview, when list is collapsed, Chinese Characters in the list title are upside down

1 participant