LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix month name rotation for CJK and other pictogram languages.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-24 22:15:57 -06:00
parent 130ccc0f73
commit 1155f712a4
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/CalendarView.vue
View File

@ -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;
}
</style>