writing-mode

src/components/FeatureSlider.vue

@@ -98,10 +98,19 @@ export default defineComponent({
             :max="maximum"
             :value="current"
             :disabled="readonly"
-            :class="[sheet.borderlessNumber, sheet.titleFont]"
-            style="width: 1.7em; text-align: center; margin-inline-start: 0.5em"
+            :class="[sheet.borderlessNumber, sheet.titleFont, 'number']"
+            style="width: 1.7em"
             @input="handleInput"
             @wheel.prevent="handleWheel"
         />
     </label>
 </template>
+
+<style scoped lang="sass">
+.number
+    margin-left: 0.5em
+    [data-writing-mode^=vertical] &
+        margin-left: 0
+        margin-top: -0.3em
+        transform: translate(-0.15em, 0.2em)
+</style>

src/settings.ts

@@ -3,9 +3,11 @@ import { reactive } from "vue";
 export interface Settings {
     updateInterval: number;
     ddcPowerOffValue: number;
+    writingMode: string;
 }
 
 export default reactive<Settings>({
     updateInterval: 500,
     ddcPowerOffValue: 6,
+    writingMode: "horizontal-tb",
 });

src/style.global.sass

@@ -5,7 +5,14 @@
     user-select: none
     @media screen and (prefers-color-scheme: dark)
         color: white
+    &[data-writing-mode=horizontal-tb]
+        writing-mode: horizontal-tb
+    &[data-writing-mode=vertical-lr]
+        writing-mode: vertical-lr
+    &[data-writing-mode=vertical-rl]
+        writing-mode: vertical-rl
 
 body
-    margin: 1.2rem 1rem
+    margin-block: 1.2rem
+    margin-inline: 1rem
     overflow: hidden

src/style.module.sass

@@ -2,8 +2,12 @@
     display: inline-block
     font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets"
     transform: scale(1.1) translateY(0.12em)
-    width: 1.1em
-    margin: 0 0.4em
+    [data-writing-mode=vertical-lr] &
+        transform: scale(1.1) translateX(0.06em)
+    [data-writing-mode=vertical-rl] &
+        transform: scale(1.1) translateX(-0.06em)
+    inline-size: 1.1em
+    margin-inline: 0.4rem
     text-align: center
 
 .resetSpacing
@@ -29,12 +33,12 @@
     @extend .resetInput
     cursor: pointer
     opacity: 0.7
-
     &:hover
         opacity: 1
 
 .borderlessNumber
     @extend .resetInput
+    text-align: center
     &::-webkit-inner-spin-button, &::-webkit-outer-spin-button
         @extend .resetAppearance
         margin: 0
@@ -69,9 +73,6 @@
 .stretchItems
     align-items: stretch
 
-.fillWidth
-    width: 100%
-
 .titleFont
     font-size: 1.1rem
     font-variation-settings: "wght" 350
@@ -80,8 +81,12 @@
     @extend .icon
     font-weight: 300
     transform: scale(1.6) translateY(0.12em)
-    width: 1.6em
-    margin: 0 0.6em
+    [data-writing-mode=vertical-lr] &
+        transform: scale(1.6) translateX(0.06em)
+    [data-writing-mode=vertical-rl] &
+        transform: scale(1.6) translateX(-0.06em)
+    inline-size: 1.6em
+    margin-inline: 0.6rem
 
 .cozyLine
     line-height: 2.2
@@ -93,10 +98,13 @@
     --slider-thumb-color: var(--accent-dark1)
     --slider-thumb-border: #ffffff
     --slider-track-color: #868686
+    --slider-end: right
     @media screen and (prefers-color-scheme: dark)
         --slider-thumb-color: var(--accent-light2)
         --slider-thumb-border: #414141
         --slider-track-color: #9b9b9b
+    [data-writing-mode^=vertical] &
+        --slider-end: top
 
     @extend .resetInput
     margin: 0.15rem
@@ -110,13 +118,21 @@
         background: var(--slider-thumb-color)
         box-shadow: 0 0 0 0.3rem var(--slider-thumb-border), 0 0.04rem 0.1rem 0.3rem #0008
         transform: translateY(-0.2rem) scale(1)
+        [data-writing-mode=vertical-lr] &
+            transform: translateX(-0.2rem) scale(1)
+        [data-writing-mode=vertical-rl] &
+            transform: translateX(0.2rem) scale(1)
         &:hover
             box-shadow: 0 0 0 0.15rem var(--slider-thumb-border), 0 0.04rem 0.1rem 0.15rem #0008
             transform: translateY(-0.2rem) scale(1.3)
+            [data-writing-mode=vertical-lr] &
+                transform: translateX(-0.2rem) scale(1.3)
+            [data-writing-mode=vertical-rl] &
+                transform: translateX(0.2rem) scale(1.3)
         transition: box-shadow 0.15s, transform 0.15s
 
     &::-webkit-slider-runnable-track
         @extend .resetInput
-        background: linear-gradient(to right, var(--slider-thumb-color), var(--slider-thumb-color) var(--slider-value), var(--slider-track-color) var(--slider-value), var(--slider-track-color))
-        height: 0.3rem
+        background: linear-gradient(to var(--slider-end), var(--slider-thumb-color), var(--slider-thumb-color) var(--slider-value), var(--slider-track-color) var(--slider-value), var(--slider-track-color))
+        block-size: 0.3rem
         border-radius: 0.6rem

src/wm.ts

@@ -1,8 +1,9 @@
 import { invoke } from "@tauri-apps/api";
 import { listen, Event } from "@tauri-apps/api/event";
 import { LogicalPosition, LogicalSize, PhysicalPosition, appWindow } from "@tauri-apps/api/window";
-import { reactive, watch, watchEffect } from "vue";
+import { reactive, watch, watchEffect, ref, computed } from "vue";
 import { watchDelayed, watchThrottled } from "./watchers";
+import settings from "./settings";
 
 const panelState = reactive({
     width: 350,
@@ -12,13 +13,31 @@ const panelState = reactive({
     theme: await appWindow.theme(),
 });
 
+const html: HTMLHtmlElement = document.querySelector(":root")!;
+const documentSize = ref<ResizeObserverSize>();
+const verticalMode = computed(() => settings.writingMode.startsWith("vertical"));
+
 const resizoObserver = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    const borderBox = entry.borderBoxSize[0];
-    panelState.width = borderBox.inlineSize;
-    panelState.height = borderBox.blockSize;
+    documentSize.value = entries[0].borderBoxSize[0];
+});
+resizoObserver.observe(html);
+
+watchEffect(() => {
+    const size = documentSize.value;
+    if (size) {
+        if (verticalMode.value) {
+            panelState.width = size.blockSize;
+            panelState.height = size.inlineSize;
+        } else {
+            panelState.width = size.inlineSize;
+            panelState.height = size.blockSize;
+        }
+    }
+});
+
+watchEffect(() => {
+    html.dataset.writingMode = settings.writingMode;
 });
-resizoObserver.observe(document.querySelector("html")!);
 
 appWindow.onFocusChanged(({ payload }) => {
     panelState.focused = payload;
@@ -44,8 +63,8 @@ async function locatePanel(
 ): Promise<Animation | undefined> {
     const anchorPosition = positionInMonitor ?? (await appWindow.innerPosition());
     const windowSize = new LogicalSize(
-        Math.max(300, panelState.width),
-        Math.max(50, panelState.height),
+        Math.max(verticalMode.value ? 50 : 350, panelState.width),
+        Math.max(verticalMode.value ? 300 : 50, panelState.height),
     );
     const { width, height } = windowSize;
     const cornerPosition = await invoke<RawPosition>("get_workarea_corner", {