diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue index 411a7b7..106ce64 100644 --- a/src/components/CalendarView.vue +++ b/src/components/CalendarView.vue @@ -550,6 +550,21 @@ const handleHeaderYearChange = ({ scrollTop: st }) => { function openSettings() { settingsDialog.value?.open() } +// Heuristic: rotate month label (180deg) only for predominantly Latin text. +// We explicitly avoid locale detection; rely solely on characters present. +// Disable rotation if any CJK Unified Ideograph or Compatibility Ideograph appears. +function shouldRotateMonth(label) { + if (!label) return false + // Rotate ONLY if any Latin script alphabetic character is present. + // Prefer Unicode script property when supported. + try { + if (/\p{Script=Latin}/u.test(label)) return true + } catch (e) { + // Fallback for environments lacking Unicode property escapes. + if (/[A-Za-z\u00C0-\u024F\u1E00-\u1EFF]/u.test(label)) return true + } + return false +} // Keep roughly same visible date when first_day setting changes. watch( () => calendarStore.config.first_day, @@ -647,6 +662,7 @@ window.addEventListener('resize', () => { :key="`month-${week.virtualWeek}`" v-show="week.monthLabel" class="month-name-label" + :class="{ 'no-rotate': !shouldRotateMonth(week.monthLabel?.text) }" :style="{ top: week.top + 'px', height: week.monthLabel?.height + 'px', @@ -812,4 +828,8 @@ header h1 { transform: rotate(180deg); transform-origin: center; } + +.month-name-label.no-rotate > span { + transform: none; +}