feat(client): writing direction support

locales/en-US.yml

@@ -1356,6 +1356,13 @@ _nsfw:
   respect: "Hide NSFW media"
   ignore: "Don't hide NSFW media"
   force: "Hide all media"
+writingMode: "Writing mode"
+_writingMode:
+  horizontalTB: "Horizontal, top to bottom"
+  verticalLR: "Vertical, left to right, sideways"
+  verticalRL: "Vertical, right to left, sideways"
+  verticalLRUpright: "Vertical, left to right, upright"
+  verticalRLUpright: "Vertical, right to left, upright"
 _mfm:
   play: "Play MFM"
   stop: "Stop MFM"

locales/ja-JP.yml

@@ -1121,6 +1121,13 @@ _nsfw:
   respect: "閲覧注意のメディアは隠す"
   ignore: "閲覧注意のメディアを隠さない"
   force: "常にメディアを隠す"
+writingMode: "組み方向"
+_writingMode:
+  horizontalTB: "横組み、上から下"
+  verticalLR: "縦組み、左から右、英数字90度回転"
+  verticalRL: "縦組み、右から左、英数字90度回転"
+  verticalLRUpright: "縦組み、左から右、英数字1字ずつ配置"
+  verticalRLUpright: "縦組み、右から左、英数字1字ずつ配置"
 _mfm:
   cheatSheet: "MFMチートシート"
   intro: "MFMは、MisskeyやFirefish、Akkomaなどの様々な場所で使用できるマークアップ言語です。ここでは、MFMで使用可能な構文一覧が確認できます。"

locales/zh-CN.yml

@@ -1012,6 +1012,13 @@ _nsfw:
   respect: "隐藏敏感内容"
   ignore: "不隐藏敏感内容"
   force: "总是隐藏内容"
+writingMode: "书写方向"
+_writingMode:
+  horizontalTB: "横排，由上向下"
+  verticalLR: "直排，由左向右，字母旋转90°"
+  verticalRL: "直排，由右向左，字母旋转90°"
+  verticalLRUpright: "直排，由左向右，字母逐个排列"
+  verticalRLUpright: "直排，由右向左，字母逐个排列"
 _mfm:
   cheatSheet: "MFM 代码速查表"
   intro: "MFM 是一种在 Misskey、Firefish、Akkoma 中使用的标记语言，可以在很多地方使用。您可以在此处查看所有可用的 MFM 语法的列表。"

locales/zh-TW.yml

@@ -1004,6 +1004,13 @@ _nsfw:
   respect: "隱藏敏感內容"
   ignore: "不隱藏敏感內容"
   force: "隱藏所有內容"
+writingMode: "書寫方向"
+_writingMode:
+  horizontalTB: "橫排，由上而下"
+  verticalLR: "直排，由左而右，字母旋轉90°"
+  verticalRL: "直排，由右而左，字母旋轉90°"
+  verticalLRUpright: "直排，由左而右，字母逐個排列"
+  verticalRLUpright: "直排，由右而左，字母逐個排列"
 _mfm:
   cheatSheet: "MFM代碼小抄"
   intro: "MFM是Misskey、Firefish、Akkoma等專用的標記語言，可以在各個位置使用。 您可以這裏看到MFM可用語法列表。"

packages/client/src/init.ts

@@ -116,6 +116,23 @@ function checkForSplash() {
 	const html = document.documentElement;
 	html.setAttribute("lang", lang || "en-US");
 	html.setAttribute("dir", "auto");
+	const writingMode = localStorage.getItem("writingMode");
+	switch (writingMode) {
+		case "vertical-lr-upright":
+			html.classList.add("vertical-lr");
+			html.classList.add("upright");
+			break;
+		case "vertical-lr":
+			html.classList.add("vertical-lr");
+			break;
+		case "vertical-rl-upright":
+			html.classList.add("vertical-rl");
+			html.classList.add("upright");
+			break;
+		case "vertical-rl":
+			html.classList.add("vertical-rl");
+			break;
+	}
 	// #endregion
 
 	// #region loginId

packages/client/src/pages/settings/general.vue

@@ -255,6 +255,15 @@
 				<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
 				<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
 			</FormSelect>
+
+			<FormSelect v-model="writingMode" class="_formBlock">
+				<template #label>{{ i18n.ts.writingMode }}</template>
+				<option value="horizontal-tb">{{ i18n.ts._writingMode.horizontalTB }}</option>
+				<option value="vertical-rl">{{ i18n.ts._writingMode.verticalRL }}</option>
+				<option value="vertical-rl-upright">{{ i18n.ts._writingMode.verticalRLUpright }}</option>
+				<option value="vertical-lr">{{ i18n.ts._writingMode.verticalLR }}</option>
+				<option value="vertical-lr-upright">{{ i18n.ts._writingMode.verticalLRUpright }}</option>
+			</FormSelect>
 		</FormSection>
 
 		<FormSection>
@@ -445,6 +454,9 @@ const mergeThreadInTimeline = computed(
 const mergeRenotesInTimeline = computed(
 	defaultStore.makeGetterSetter("mergeRenotesInTimeline"),
 );
+const writingMode = computed(
+	defaultStore.makeGetterSetter("writingMode"),
+);
 
 // This feature (along with injectPromo) is currently disabled
 // function onChangeInjectFeaturedNote(v) {
@@ -480,6 +492,23 @@ watch(translateLang, () => {
 	localStorage.setItem("translateLang", translateLang.value as string);
 });
 
+watch(writingMode, () => {
+	localStorage.setItem("writingMode", writingMode.value as string);
+	const { classList } = document.documentElement;
+	classList.remove("vertical-rl");
+	classList.remove("vertical-lr");
+	classList.remove("upright");
+	if (writingMode.value.startsWith("vertical-rl")) {
+		classList.add("vertical-rl");
+	}
+	if (writingMode.value.startsWith("vertical-lr")) {
+		classList.add("vertical-lr");
+	}
+	if (writingMode.value.endsWith("upright")) {
+		classList.add("upright");
+	}
+});
+
 watch(
 	[
 		lang,
@@ -499,7 +528,7 @@ watch(
 		useEmojiCdn,
 		enableTimelineStreaming,
 		enablePullToRefresh,
-		pullToRefreshThreshold,
+		pullToRefreshThreshold
 	],
 	async () => {
 		await reloadAsk();

packages/client/src/store.ts

@@ -469,6 +469,10 @@ export const defaultStore = markRaw(
 			where: "deviceAccount",
 			default: true,
 		},
+		writingMode: {
+			where: "deviceAccount",
+			default: "horizontal-tb" as "horizontal-tb" | "vertical-rl" | "vertical-lr" | "vertical-rl-upright" | "vertical-lr-upright",
+		}
 	}),
 );
 

packages/client/src/style.scss

@@ -126,6 +126,11 @@ html {
 		--gradient-to-block-end: to left;
 	}
 
+	&.upright {
+		text-orientation: upright;
+		text-transform: full-width;
+	}
+
 	&.useCJKFont {
 		font-family: "Hiragino Maru Gothic Pro", "BIZ UDGothic",
 			"Atkinson Hyperlegible", Roboto, HelveticaNeue, Arial, sans-serif;