Fix month name rotation for CJK and other pictogram languages.

This commit is contained in:
Leo Vasanko 2025-08-24 22:15:57 -06:00
parent 130ccc0f73
commit 1155f712a4

View File

@ -550,6 +550,21 @@ const handleHeaderYearChange = ({ scrollTop: st }) => {
function openSettings() { function openSettings() {
settingsDialog.value?.open() 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. // Keep roughly same visible date when first_day setting changes.
watch( watch(
() => calendarStore.config.first_day, () => calendarStore.config.first_day,
@ -647,6 +662,7 @@ window.addEventListener('resize', () => {
:key="`month-${week.virtualWeek}`" :key="`month-${week.virtualWeek}`"
v-show="week.monthLabel" v-show="week.monthLabel"
class="month-name-label" class="month-name-label"
:class="{ 'no-rotate': !shouldRotateMonth(week.monthLabel?.text) }"
:style="{ :style="{
top: week.top + 'px', top: week.top + 'px',
height: week.monthLabel?.height + 'px', height: week.monthLabel?.height + 'px',
@ -812,4 +828,8 @@ header h1 {
transform: rotate(180deg); transform: rotate(180deg);
transform-origin: center; transform-origin: center;
} }
.month-name-label.no-rotate > span {
transform: none;
}
</style> </style>