From 8b6f88f7aa064a9584b81dcb90ead459bd717095 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sat, 23 Dec 2023 06:23:17 +0900
Subject: [PATCH] feat: RTL Layout Support

---
 README.md                                     |  2 +
 packages/backend/src/server/web/bios.css      |  4 +-
 packages/backend/src/server/web/cli.css       |  2 +-
 packages/backend/src/server/web/style.css     | 16 +++----
 packages/backend/src/services/send-email.ts   |  2 +-
 .../client/src/components/MkAbuseReport.vue   |  6 +--
 .../src/components/MkAbuseReportWindow.vue    |  2 +-
 packages/client/src/components/MkButton.vue   |  6 +--
 .../src/components/MkChannelFollowButton.vue  |  6 +--
 .../src/components/MkChannelPreview.vue       | 10 ++---
 packages/client/src/components/MkChart.vue    |  2 +-
 .../client/src/components/MkChartTooltip.vue  |  2 +-
 .../client/src/components/MkContainer.vue     |  8 ++--
 .../client/src/components/MkCropperDialog.vue |  2 +-
 packages/client/src/components/MkCwButton.vue |  4 +-
 .../src/components/MkDateSeparatedList.vue    |  8 ++--
 .../client/src/components/MkDrive.file.vue    | 10 ++---
 .../client/src/components/MkDrive.folder.vue  | 12 +++---
 .../src/components/MkDrive.navFolder.vue      |  2 +-
 packages/client/src/components/MkDrive.vue    |  4 +-
 .../src/components/MkDriveFileThumbnail.vue   |  2 +-
 .../src/components/MkDriveSelectDialog.vue    |  2 +-
 .../client/src/components/MkEmojiPicker.vue   |  4 +-
 .../src/components/MkFileListForAdmin.vue     | 10 +++--
 packages/client/src/components/MkFolder.vue   |  2 +-
 .../client/src/components/MkFollowButton.vue  |  6 +--
 .../src/components/MkGalleryPostPreview.vue   |  4 +-
 packages/client/src/components/MkGoogle.vue   |  2 +-
 .../client/src/components/MkImageViewer.vue   |  6 +--
 packages/client/src/components/MkInfo.vue     |  4 +-
 .../src/components/MkInstanceCardMini.vue     |  4 +-
 .../src/components/MkInstanceSelectDialog.vue |  2 +-
 .../client/src/components/MkInstanceStats.vue |  2 +-
 .../src/components/MkInstanceTicker.vue       |  2 +-
 packages/client/src/components/MkKeyValue.vue |  2 +-
 .../client/src/components/MkLaunchPad.vue     |  6 +--
 packages/client/src/components/MkLink.vue     |  2 +-
 packages/client/src/components/MkMedia.vue    |  4 +-
 .../client/src/components/MkMediaBanner.vue   |  2 +-
 .../client/src/components/MkMediaCaption.vue  | 10 ++---
 .../client/src/components/MkMediaList.vue     |  2 +-
 packages/client/src/components/MkMenu.vue     | 16 +++----
 packages/client/src/components/MkModal.vue    | 10 ++---
 .../src/components/MkModalPageWindow.vue      |  4 +-
 .../client/src/components/MkModalWindow.vue   |  6 +--
 packages/client/src/components/MkMoved.vue    |  7 +++-
 packages/client/src/components/MkNote.vue     | 36 ++++++++--------
 .../client/src/components/MkNoteDetailed.vue  | 10 ++---
 .../client/src/components/MkNoteHeader.vue    |  8 ++--
 .../client/src/components/MkNotePreview.vue   |  2 +-
 packages/client/src/components/MkNoteSub.vue  | 42 +++++++++----------
 .../client/src/components/MkNotification.vue  | 10 ++---
 .../src/components/MkNotificationToast.vue    |  2 +-
 .../src/components/MkObjectView.value.vue     |  6 +--
 .../client/src/components/MkPagePreview.vue   |  6 +--
 .../client/src/components/MkPageWindow.vue    |  2 +-
 .../client/src/components/MkPagination.vue    |  4 +-
 packages/client/src/components/MkPoll.vue     |  6 +--
 .../client/src/components/MkPollEditor.vue    |  2 +-
 packages/client/src/components/MkPostForm.vue | 10 +++--
 .../src/components/MkPostFormAttaches.vue     |  6 +--
 .../client/src/components/MkQuoteButton.vue   |  2 +-
 .../client/src/components/MkReactedUsers.vue  |  2 +-
 .../components/MkReactionsViewer.details.vue  | 12 +++---
 .../client/src/components/MkRemoteCaution.vue |  2 +-
 .../src/components/MkShowMoreButton.vue       |  2 +-
 packages/client/src/components/MkSparkle.vue  |  2 +-
 .../src/components/MkSubNoteContent.vue       | 16 +++----
 .../client/src/components/MkSuperMenu.vue     | 12 +++---
 packages/client/src/components/MkTab.vue      | 10 ++---
 packages/client/src/components/MkTagCloud.vue |  2 +-
 packages/client/src/components/MkTimeline.vue |  6 +--
 packages/client/src/components/MkToast.vue    |  4 +-
 .../src/components/MkTutorialDialog.vue       |  6 +--
 .../client/src/components/MkUrlPreview.vue    |  2 +-
 .../client/src/components/MkUserCardMini.vue  |  6 +--
 .../client/src/components/MkUsersTooltip.vue  |  4 +-
 .../client/src/components/MkVisibility.vue    |  2 +-
 .../src/components/MkVisibilityPicker.vue     |  6 +--
 packages/client/src/components/MkWidgets.vue  |  4 +-
 packages/client/src/components/MkWindow.vue   | 20 ++++-----
 .../client/src/components/form/checkbox.vue   |  2 +-
 .../client/src/components/form/folder.vue     | 10 ++---
 packages/client/src/components/form/input.vue |  8 ++--
 packages/client/src/components/form/link.vue  | 10 ++---
 packages/client/src/components/form/radio.vue |  8 ++--
 .../client/src/components/form/select.vue     |  8 ++--
 .../client/src/components/form/switch.vue     |  6 +--
 .../client/src/components/global/MkAd.vue     |  2 +-
 .../client/src/components/global/MkAvatar.vue |  6 +--
 .../src/components/global/MkLoading.vue       |  2 +-
 .../global/MkMisskeyFlavoredMarkdown.vue      |  4 +-
 .../src/components/global/MkPageHeader.vue    | 36 ++++++++--------
 .../client/src/components/global/MkUrl.vue    |  2 +-
 .../src/components/page/page.switch.vue       |  2 +-
 packages/client/src/init.ts                   |  4 +-
 packages/client/src/pages/about-firefish.vue  |  6 +--
 packages/client/src/pages/admin/_header_.vue  | 21 ++++++----
 packages/client/src/pages/admin/emojis.vue    |  4 +-
 packages/client/src/pages/admin/index.vue     |  2 +-
 .../src/pages/admin/overview.federation.vue   |  6 +--
 .../src/pages/admin/overview.metrics.vue      |  4 +-
 .../client/src/pages/admin/overview.stats.vue | 12 +++---
 .../client/src/pages/admin/overview.user.vue  |  4 +-
 .../client/src/pages/admin/promotions.vue     |  2 +-
 .../client/src/pages/admin/queue.chart.vue    |  2 +-
 packages/client/src/pages/admin/relays.vue    |  2 +-
 packages/client/src/pages/admin/users.vue     |  4 +-
 packages/client/src/pages/channel.vue         | 16 +++----
 packages/client/src/pages/emojis.emoji.vue    |  2 +-
 packages/client/src/pages/explore.users.vue   | 20 ++++-----
 packages/client/src/pages/follow-requests.vue |  6 +--
 packages/client/src/pages/gallery/edit.vue    |  4 +-
 packages/client/src/pages/gallery/post.vue    |  6 +--
 .../pages/messaging/messaging-room.form.vue   |  4 +-
 .../messaging/messaging-room.message.vue      | 38 +++++++++--------
 .../src/pages/messaging/messaging-room.vue    |  4 +-
 packages/client/src/pages/miauth.vue          |  4 +-
 .../client/src/pages/my-antennas/index.vue    |  4 +-
 .../page-editor/page-editor.container.vue     |  4 +-
 .../src/pages/page-editor/page-editor.vue     |  4 +-
 packages/client/src/pages/page.vue            | 12 +++---
 packages/client/src/pages/settings/2fa.vue    | 13 +++---
 .../src/pages/settings/import-export.vue      |  2 +-
 packages/client/src/pages/settings/index.vue  |  2 +-
 .../client/src/pages/settings/migration.vue   |  2 +-
 packages/client/src/pages/settings/navbar.vue |  4 +-
 packages/client/src/pages/settings/plugin.vue |  2 +-
 .../client/src/pages/settings/profile.vue     |  4 +-
 .../client/src/pages/settings/security.vue    |  6 +--
 packages/client/src/pages/settings/theme.vue  | 28 ++++++-------
 packages/client/src/pages/theme-editor.vue    |  4 +-
 packages/client/src/pages/user-info.vue       |  4 +-
 packages/client/src/pages/user/home.vue       | 36 ++++++++--------
 .../client/src/pages/user/index.photos.vue    |  4 +-
 packages/client/src/pages/user/reactions.vue  |  4 +-
 .../client/src/pages/welcome.entrance.a.vue   | 28 ++++++-------
 .../client/src/pages/welcome.entrance.b.vue   | 14 +++----
 .../client/src/pages/welcome.entrance.c.vue   | 22 +++++-----
 packages/client/src/scripts/langmap.ts        | 13 ++++++
 packages/client/src/style.scss                | 16 +++----
 packages/client/src/ui/_common_/common.vue    |  4 +-
 .../src/ui/_common_/navbar-for-mobile.vue     | 30 ++++++-------
 packages/client/src/ui/_common_/navbar.vue    | 14 +++----
 .../src/ui/_common_/statusbar-federation.vue  |  6 +--
 .../src/ui/_common_/statusbar-user-list.vue   |  2 +-
 .../src/ui/_common_/stream-indicator.vue      |  2 +-
 packages/client/src/ui/_common_/upload.vue    |  4 +-
 packages/client/src/ui/deck.vue               | 27 ++++++------
 .../client/src/ui/deck/antenna-column.vue     |  2 +-
 .../client/src/ui/deck/channel-column.vue     |  2 +-
 packages/client/src/ui/deck/column.vue        | 10 ++---
 packages/client/src/ui/deck/direct-column.vue |  2 +-
 packages/client/src/ui/deck/list-column.vue   |  2 +-
 .../client/src/ui/deck/mentions-column.vue    |  2 +-
 .../src/ui/deck/notifications-column.vue      |  2 +-
 packages/client/src/ui/deck/tl-column.vue     |  2 +-
 .../client/src/ui/deck/widgets-column.vue     |  2 +-
 packages/client/src/ui/universal.vue          | 30 ++++++-------
 packages/client/src/ui/visitor/a.vue          |  4 +-
 packages/client/src/ui/visitor/b.vue          |  8 ++--
 packages/client/src/ui/visitor/header.vue     | 18 ++++----
 packages/client/src/ui/visitor/kanban.vue     |  4 +-
 packages/client/src/widgets/aiscript.vue      |  2 +-
 packages/client/src/widgets/calendar.vue      |  2 +-
 packages/client/src/widgets/clock.vue         |  8 ++--
 packages/client/src/widgets/federation.vue    |  4 +-
 packages/client/src/widgets/job-queue.vue     |  2 +-
 packages/client/src/widgets/memo.vue          |  2 +-
 .../src/widgets/server-metric/cpu-mem.vue     |  4 +-
 .../client/src/widgets/server-metric/cpu.vue  |  4 +-
 .../client/src/widgets/server-metric/disk.vue |  4 +-
 .../src/widgets/server-metric/meilisearch.vue |  4 +-
 .../client/src/widgets/server-metric/mem.vue  |  4 +-
 .../client/src/widgets/server-metric/net.vue  |  4 +-
 packages/client/src/widgets/slideshow.vue     |  2 +-
 packages/client/src/widgets/timeline.vue      |  4 +-
 177 files changed, 642 insertions(+), 609 deletions(-)

diff --git a/README.md b/README.md
index 0939c3712..1ac4ff602 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@
 
 ## 細かい変更点
 
+- マージされていない本家版へのプルリクエストを独断でマージ
+  - RTL Layout Support ([!10452](https://git.joinfirefish.org/firefish/firefish/-/merge_requests/10452))
 - `emojis` の API エンドポイント（Misskey v13- 互換）を追加（[firefish-mkdir](https://git.mkdir.uk/hiira/firefish-mkdir) から取り込み）
 - Docker のベースイメージに Node v21 を使用
 - HTML のコードに入るコメントアートを削除
diff --git a/packages/backend/src/server/web/bios.css b/packages/backend/src/server/web/bios.css
index d6a1285e9..719ac90bf 100644
--- a/packages/backend/src/server/web/bios.css
+++ b/packages/backend/src/server/web/bios.css
@@ -83,8 +83,8 @@ button {
 	color: rgb(156, 207, 216);
 	font-size: 16px;
   padding: 0 20px;
-  margin-right: 5px;
-  margin-left: 5px;
+  margin-inline-end: 5px;
+  margin-inline-start: 5px;
 }
 button:hover {
 	background: #555;
diff --git a/packages/backend/src/server/web/cli.css b/packages/backend/src/server/web/cli.css
index 740a2aa1a..cfbe047ff 100644
--- a/packages/backend/src/server/web/cli.css
+++ b/packages/backend/src/server/web/cli.css
@@ -19,7 +19,7 @@ main {
 
 img {
 	border-radius: 10px;
-	margin-right: 10px;
+	margin-inline-end: 10px;
 }
 
 #form {
diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index cb99a160d..8a16ca842 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -13,7 +13,7 @@ html {
 	position: fixed;
 	z-index: 10000;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100vw;
 	height: 100vh;
 	cursor: wait;
@@ -25,9 +25,9 @@ html {
 #splashIcon {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	margin: auto;
 	width: 64px;
 	height: 64px;
@@ -37,9 +37,9 @@ html {
 #splashSpinner {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	margin: auto;
 	display: inline-block;
 	width: 28px;
@@ -51,7 +51,7 @@ html {
 #splashSpinner > .spinner {
 	position: absolute;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 28px;
 	height: 28px;
 	fill-rule: evenodd;
@@ -113,9 +113,9 @@ html {
 #splashText {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	margin: auto;
 	display: inline-block;
 	width: 70%;
diff --git a/packages/backend/src/services/send-email.ts b/packages/backend/src/services/send-email.ts
index ccc6b365d..fd8f7328b 100644
--- a/packages/backend/src/services/send-email.ts
+++ b/packages/backend/src/services/send-email.ts
@@ -47,7 +47,7 @@ export async function sendEmail(
 	<body style="background: #191724; padding: 16px; margin: 0; font-family: sans-serif; font-size: 14px;">
 		<main style="max-width: 500px; margin: 0 auto; background: #1f1d2e; color: #e0def4; border-radius: 20px;">
 			<header style="padding: 32px; background: #31748f; color: #e0def4; display: flex; border-radius: 20px;">
-				<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-right: 16px;"/>
+				<img src="${meta.logoImageUrl || meta.iconUrl || iconUrl}" style="max-width: 128px; max-height: 72px; vertical-align: bottom; margin-inline-end: 16px;"/>
 				<h1 style="margin: 0 0 1em 0;">${meta.name}</h1>
 			</header>
 			<article style="padding: 32px;">
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index 553652394..24067e6a7 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -100,9 +100,9 @@ function resolve() {
 	> .target {
 		width: 35%;
 		box-sizing: border-box;
-		text-align: left;
+		text-align: initial;
 		padding: 24px;
-		border-right: solid 1px var(--divider);
+		border-inline-end: solid 1px var(--divider);
 
 		> .info {
 			display: flex;
@@ -129,7 +129,7 @@ function resolve() {
 			}
 
 			> .names {
-				margin-left: 0.3em;
+				margin-inline-start: 0.3em;
 				padding: 0 8px;
 				flex: 1;
 
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 8d5675868..c6fc768a6 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -9,7 +9,7 @@
 		<template #header>
 			<i
 				:class="icon('ph-warning-circle')"
-				style="margin-right: 0.5em"
+				style="margin-inline-end: 0.5em"
 			></i>
 			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 				<template #name>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 071e981dd..02a7ed666 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -128,8 +128,8 @@ function onMousedown(evt: MouseEvent): void {
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
-	margin-right: 0.2rem;
-	margin-left: 0.2rem;
+	margin-inline-end: 0.2rem;
+	margin-inline-start: 0.2rem;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
@@ -227,7 +227,7 @@ function onMousedown(evt: MouseEvent): void {
 		position: absolute;
 		z-index: 0;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		border-radius: 6px;
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index c1910bc59..b9a20e4b3 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -93,9 +93,9 @@ async function onClick() {
 			pointer-events: none;
 			position: absolute;
 			top: -5px;
-			right: -5px;
+			inset-inline-end: -5px;
 			bottom: -5px;
-			left: -5px;
+			inset-inline-start: -5px;
 			border: 2px solid var(--focus);
 			border-radius: 32px;
 		}
@@ -130,7 +130,7 @@ async function onClick() {
 	}
 
 	> span {
-		margin-right: 6px;
+		margin-inline-end: 6px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index f824a1b2f..c23217c02 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -12,7 +12,7 @@
 					<I18n
 						:src="i18n.ts._channel.usersCount"
 						tag="span"
-						style="margin-left: 4px"
+						style="margin-inline-start: 4px"
 					>
 						<template #n>
 							<b>{{ channel.usersCount }}</b>
@@ -24,7 +24,7 @@
 					<I18n
 						:src="i18n.ts._channel.notesCount"
 						tag="span"
-						style="margin-left: 4px"
+						style="margin-inline-start: 4px"
 					>
 						<template #n>
 							<b>{{ channel.notesCount }}</b>
@@ -88,7 +88,7 @@ const bannerStyle = computed(() => {
 		> .fade {
 			position: absolute;
 			bottom: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 64px;
 			background: linear-gradient(0deg, var(--panel), var(--X15));
@@ -97,7 +97,7 @@ const bannerStyle = computed(() => {
 		> .name {
 			position: absolute;
 			top: 16px;
-			left: 16px;
+			inset-inline-start: 16px;
 			padding: 12px 16px;
 			-webkit-backdrop-filter: var(--blur, blur(8px));
 			backdrop-filter: var(--blur, blur(8px));
@@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
 			position: absolute;
 			z-index: 1;
 			bottom: 16px;
-			right: 16px;
+			inset-inline-end: 16px;
 			padding: 8px 12px;
 			font-size: 80%;
 			-webkit-backdrop-filter: var(--blur, blur(8px));
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index adfed3fb3..30aef8f7c 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -459,7 +459,7 @@ onMounted(() => {
 	> .fetching {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		-webkit-backdrop-filter: var(--blur, blur(12px));
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index 659dc6d39..6886f827d 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -61,7 +61,7 @@ const emit = defineEmits<{
 			height: 8px;
 			border-width: 1px;
 			border-style: solid;
-			margin-right: 8px;
+			margin-inline-end: 8px;
 		}
 	}
 }
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 404f98441..794524c52 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -217,7 +217,7 @@ export default defineComponent({
 	> header {
 		position: sticky;
 		top: var(--stickyTop, 0px);
-		left: 0;
+		inset-inline-start: 0;
 		color: var(--panelHeaderFg);
 		background: var(--panelHeaderBg);
 		border-bottom: solid 0.5px var(--panelHeaderDivider);
@@ -229,7 +229,7 @@ export default defineComponent({
 			padding: 12px 16px;
 
 			> ::v-deep(i) {
-				margin-right: 6px;
+				margin-inline-end: 6px;
 				transform: translateY(0.1em);
 			}
 
@@ -242,7 +242,7 @@ export default defineComponent({
 			position: absolute;
 			z-index: 2;
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 			height: 100%;
 
 			> ::v-deep(button) {
@@ -265,7 +265,7 @@ export default defineComponent({
 				position: absolute;
 				z-index: 10;
 				bottom: 0;
-				left: 0;
+				inset-inline-start: 0;
 				width: 100%;
 				height: 64px;
 				background: linear-gradient(0deg, var(--panel), var(--X15));
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 1c5669933..7504abe1f 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -160,7 +160,7 @@ onMounted(() => {
 		position: absolute;
 		z-index: 10;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		display: flex;
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index a8e741732..c851158ad 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -84,9 +84,9 @@ defineExpose({
 
 	&.fade {
 		display: block;
-		position: absolute;
+		position: sticky;
 		bottom: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		> span {
 			display: inline-block;
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 124de0832..1628724fd 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -176,18 +176,18 @@ export default defineComponent({
 
 			> span {
 				&:first-child {
-					margin-right: 8px;
+					margin-inline-end: 8px;
 
 					> .icon {
-						margin-right: 8px;
+						margin-inline-end: 8px;
 					}
 				}
 
 				&:last-child {
-					margin-left: 8px;
+					margin-inline-start: 8px;
 
 					> .icon {
-						margin-left: 8px;
+						margin-inline-start: 8px;
 					}
 				}
 			}
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 5163b9f7c..5105fc0f0 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -308,7 +308,7 @@ async function deleteFile() {
 	> .label {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		pointer-events: none;
 
 		&:before,
@@ -322,14 +322,14 @@ async function deleteFile() {
 
 		&:before {
 			top: 0;
-			left: 57px;
+			inset-inline-start: 57px;
 			width: 28px;
 			height: 8px;
 		}
 
 		&:after {
 			top: 57px;
-			left: 0;
+			inset-inline-start: 0;
 			width: 8px;
 			height: 28px;
 		}
@@ -345,14 +345,14 @@ async function deleteFile() {
 			position: absolute;
 			z-index: 2;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 		}
 
 		> p {
 			position: absolute;
 			z-index: 3;
 			top: 19px;
-			left: -28px;
+			inset-inline-start: -28px;
 			width: 120px;
 			margin: 0;
 			text-align: center;
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 38dc61860..cf34f6e1b 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
 	> .checkbox {
 		position: absolute;
 		bottom: 8px;
-		right: 8px;
+		inset-inline-end: 8px;
 		width: 16px;
 		height: 16px;
 		background: #fff;
@@ -319,9 +319,9 @@ function onContextmenu(ev: MouseEvent) {
 			pointer-events: none;
 			position: absolute;
 			top: -4px;
-			right: -4px;
+			inset-inline-end: -4px;
 			bottom: -4px;
-			left: -4px;
+			inset-inline-start: -4px;
 			border: 2px dashed var(--focus);
 			border-radius: 4px;
 		}
@@ -333,9 +333,9 @@ function onContextmenu(ev: MouseEvent) {
 		color: var(--desktopDriveFolderFg);
 
 		> i {
-			margin-right: 4px;
-			margin-left: 2px;
-			text-align: left;
+			margin-inline-end: 4px;
+			margin-inline-start: 2px;
+			text-align: initial;
 		}
 	}
 
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index cfd889ae5..b972fbce8 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -126,7 +126,7 @@ function onDrop(ev: DragEvent) {
 	}
 
 	> i {
-		margin-right: 4px;
+		margin-inline-end: 4px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 55c7d989c..298039659 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -848,7 +848,7 @@ onBeforeUnmount(() => {
 		}
 
 		> .menu {
-			margin-left: auto;
+			margin-inline-start: auto;
 			padding: 0 12px;
 		}
 	}
@@ -916,7 +916,7 @@ onBeforeUnmount(() => {
 
 	> .dropzone {
 		position: absolute;
-		left: 0;
+		inset-inline-start: 0;
 		top: 38px;
 		width: 100%;
 		height: calc(100% - 38px);
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 9fe0a62ca..81d4a0cf1 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -88,7 +88,7 @@ const isThumbnailAvailable = computed(() => {
 		width: 30%;
 		height: auto;
 		margin: 0;
-		right: 4%;
+		inset-inline-end: 4%;
 		bottom: 4%;
 	}
 
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index 1047acce9..5ec929a83 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -22,7 +22,7 @@
 			}}
 			<span
 				v-if="selected.length > 0"
-				style="margin-left: 8px; opacity: 0.5"
+				style="margin-inline-start: 8px; opacity: 0.5"
 				>({{ number(selected.length) }})</span
 			>
 		</template>
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index c4cdf6826..bdd934492 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -634,7 +634,7 @@ defineExpose({
 			> header {
 				/*position: sticky;
 				top: 0;
-				left: 0;*/
+				inset-inline-start: 0;*/
 				height: 32px;
 				line-height: 32px;
 				z-index: 2;
@@ -647,7 +647,7 @@ defineExpose({
 			> header {
 				position: sticky;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				height: 32px;
 				line-height: 32px;
 				z-index: 1;
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index e6a02a832..021f9ba12 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -36,7 +36,9 @@
 						<div v-else>{{ i18n.ts.system }}</div>
 					</div>
 					<div>
-						<span style="margin-right: 1em">{{ file.type }}</span>
+						<span style="margin-inline-end: 1em">{{
+							file.type
+						}}</span>
 						<span>{{ bytes(file.size) }}</span>
 					</div>
 					<div>
@@ -82,7 +84,7 @@ const props = defineProps<{
 			display: flex;
 			width: 100%;
 			box-sizing: border-box;
-			text-align: left;
+			text-align: initial;
 			align-items: center;
 
 			&:hover {
@@ -95,7 +97,7 @@ const props = defineProps<{
 			}
 
 			> .body {
-				margin-left: 0.3em;
+				margin-inline-start: 0.3em;
 				padding: 8px;
 				flex: 1;
 
@@ -125,7 +127,7 @@ const props = defineProps<{
 				position: absolute;
 				z-index: 10;
 				top: 8px;
-				left: 8px;
+				inset-inline-start: 8px;
 				padding: 2px 4px;
 				background: #ff0000bf;
 				color: #fff;
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 354b2c59d..1c22d0e45 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -159,7 +159,7 @@ export default defineComponent({
 			padding: 12px 16px 12px 0;
 
 			> i {
-				margin-right: 6px;
+				margin-inline-end: 6px;
 			}
 
 			&:empty {
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 465999479..50a2cc121 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -235,9 +235,9 @@ onBeforeUnmount(() => {
 			pointer-events: none;
 			position: absolute;
 			top: -5px;
-			right: -5px;
+			inset-inline-end: -5px;
 			bottom: -5px;
-			left: -5px;
+			inset-inline-start: -5px;
 			border: 2px solid var(--focus);
 			border-radius: 32px;
 		}
@@ -272,7 +272,7 @@ onBeforeUnmount(() => {
 	}
 
 	> span {
-		margin-right: 6px;
+		margin-inline-end: 6px;
 	}
 }
 
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index e393c6acc..e82a5234f 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -82,7 +82,7 @@ const props = defineProps<{
 			display: flex;
 
 			> .avatar {
-				margin-left: auto;
+				margin-inline-start: auto;
 				width: 32px;
 				height: 32px;
 			}
@@ -104,7 +104,7 @@ const props = defineProps<{
 				position: absolute;
 				z-index: -1;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				width: 100%;
 				height: 100%;
 				background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index 94e10ccd4..66c9ceb16 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -52,7 +52,7 @@ const search = () => {
 		margin: 0;
 		padding: 0 16px;
 		border: solid 1px var(--divider);
-		border-left: none;
+		border-inline-start: none;
 		border-radius: 0 4px 4px 0;
 
 		&:active {
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index a75928be8..aa6378e88 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -84,9 +84,9 @@ const modal = ref<InstanceType<typeof MkModal>>();
 		opacity: 0.8;
 
 		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
+			margin-inline-start: 0.5em;
+			padding-inline-start: 0.5em;
+			border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
 		}
 	}
 }
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 1247903a9..f62f16772 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -80,10 +80,10 @@ function close() {
 	}
 
 	> i {
-		margin-right: 4px;
+		margin-inline-end: 4px;
 	}
 	> .close {
-		margin-left: auto;
+		margin-inline-start: auto;
 		float: right;
 	}
 }
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index 54b4b3197..bd7556f12 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -59,7 +59,7 @@ function getInstanceIcon(instance): string {
 		height: ($bodyTitleHieght + $bodyInfoHieght);
 		object-fit: cover;
 		border-radius: 4px;
-		margin-right: 10px;
+		margin-inline-end: 10px;
 	}
 
 	> :global(.body) {
@@ -67,7 +67,7 @@ function getInstanceIcon(instance): string {
 		overflow: hidden;
 		font-size: 0.9em;
 		color: var(--fg);
-		padding-right: 8px;
+		padding-inline-end: 8px;
 
 		> :global(.host) {
 			display: block;
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index e328695e2..3075f0ad3 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -169,7 +169,7 @@ const cancel = () => {
 					> .icon {
 						width: 16px;
 						height: 16px;
-						margin-right: 8px;
+						margin-inline-end: 8px;
 						float: left;
 					}
 				}
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 9e4ff2b52..7aee04788 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -222,7 +222,7 @@ onMounted(() => {
 				> .title {
 					position: absolute;
 					top: 24px;
-					left: 24px;
+					inset-inline-start: 24px;
 				}
 			}
 
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index a365cbc87..65d7a85cb 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -112,7 +112,7 @@ function getInstanceIcon(instance): string {
 
 	> .name {
 		display: none;
-		margin-left: 4px;
+		margin-inline-start: 4px;
 		font-size: 0.85em;
 		vertical-align: top;
 		font-weight: bold;
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index a454ea949..e4d47dd8e 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -9,7 +9,7 @@
 				v-if="copy"
 				v-tooltip="i18n.ts.copy"
 				class="_textButton"
-				style="margin-left: 0.5em"
+				style="margin-inline-start: 0.5em"
 				@click="copy_"
 			>
 				<i :class="icon('ph-clipboard-text', false)"></i>
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 9e194f8e4..7893e1698 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -121,7 +121,7 @@ function close() {
 	box-sizing: border-box;
 	overflow: auto;
 	overscroll-behavior: contain;
-	text-align: left;
+	text-align: initial;
 	border-radius: 16px;
 
 	&.asDrawer {
@@ -169,13 +169,13 @@ function close() {
 			> .indicator {
 				position: absolute;
 				top: 32px;
-				left: 32px;
+				inset-inline-start: 32px;
 				color: var(--indicator);
 				font-size: 8px;
 
 				@media (max-width: 500px) {
 					top: 16px;
-					left: 16px;
+					inset-inline-start: 16px;
 				}
 			}
 
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index b49bac86b..3608b01a3 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -59,7 +59,7 @@ useTooltip(el, (showing) => {
 	word-break: break-all;
 
 	> .icon {
-		padding-left: 2px;
+		padding-inline-start: 2px;
 		font-size: 0.9em;
 	}
 }
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue
index dad2f9e77..bd8162308 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -205,7 +205,7 @@ watch(
 		border-radius: 6px;
 		overflow: hidden;
 		top: 12px;
-		right: 12px;
+		inset-inline-end: 12px;
 		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -241,7 +241,7 @@ watch(
 			display: inline-block;
 			font-size: 14px;
 			font-weight: bold;
-			left: 12px;
+			inset-inline-start: 12px;
 			opacity: 0.5;
 			padding: 0 6px;
 			text-align: center;
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 8c3fd680a..155ee987d 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -114,7 +114,7 @@ onMounted(() => {
 		}
 
 		> *:not(:last-child) {
-			margin-right: 0.2em;
+			margin-inline-end: 0.2em;
 		}
 
 		> .icon {
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index b44fa0d52..8cfe18260 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -207,7 +207,7 @@ export default defineComponent({
 	flex-direction: row;
 	overflow: scroll;
 	position: fixed;
-	left: 0;
+	inset-inline-start: 0;
 	top: 0;
 }
 @media (max-width: 850px) {
@@ -245,7 +245,7 @@ export default defineComponent({
 		> .text-count {
 			opacity: 0.7;
 			position: absolute;
-			right: 0;
+			inset-inline-end: 0;
 		}
 	}
 
@@ -318,9 +318,9 @@ export default defineComponent({
 		opacity: 0.8;
 
 		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
+			margin-inline-start: 0.5em;
+			padding-inline-start: 0.5em;
+			border-inline-start: solid 1px rgba(255, 255, 255, 0.5);
 		}
 	}
 }
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 0d6f098f8..8b0077bd5 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -312,7 +312,7 @@ const previewableCount = props.mediaList.filter((media) =>
 
 	position: absolute;
 	bottom: 30px;
-	left: 50%;
+	inset-inline-start: 50%;
 	transform: translateX(-50%);
 
 	width: 75%;
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 1054061db..35fb5a6bf 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -359,7 +359,7 @@ onBeforeUnmount(() => {
 		white-space: nowrap;
 		font-size: 0.9em;
 		line-height: 20px;
-		text-align: left;
+		text-align: initial;
 		outline: none;
 
 		&:before {
@@ -367,8 +367,8 @@ onBeforeUnmount(() => {
 			display: block;
 			position: absolute;
 			top: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			margin: auto;
 			width: calc(100% - 16px);
 			margin-bottom: 0.2rem;
@@ -472,7 +472,7 @@ onBeforeUnmount(() => {
 			cursor: default;
 
 			> .caret {
-				margin-left: auto;
+				margin-inline-start: auto;
 			}
 
 			&.childShowing {
@@ -486,12 +486,12 @@ onBeforeUnmount(() => {
 		}
 
 		> i {
-			margin-right: 5px;
+			margin-inline-end: 5px;
 			width: 20px;
 		}
 
 		> .avatar {
-			margin-right: 5px;
+			margin-inline-end: 5px;
 			width: 20px;
 			height: 20px;
 		}
@@ -499,7 +499,7 @@ onBeforeUnmount(() => {
 		> .indicator {
 			position: absolute;
 			top: 5px;
-			left: 13px;
+			inset-inline-start: 13px;
 			color: var(--indicator);
 			font-size: 12px;
 		}
@@ -531,7 +531,7 @@ onBeforeUnmount(() => {
 			}
 
 			> i {
-				margin-right: 14px;
+				margin-inline-end: 14px;
 				width: 24px;
 			}
 		}
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index f6b52a626..0f42db590 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -539,8 +539,8 @@ defineExpose({
 			position: fixed;
 			top: 0;
 			bottom: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			margin: auto;
 			padding: 32px;
 			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
@@ -604,7 +604,7 @@ defineExpose({
 	&.drawer {
 		position: fixed;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		overflow: clip;
@@ -612,8 +612,8 @@ defineExpose({
 		> .content {
 			position: fixed;
 			bottom: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			margin: auto;
 
 			> ::v-deep(*) {
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index bd4437900..11ac9b081 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -196,7 +196,7 @@ function onContextmenu(ev: MouseEvent) {
 		@media (max-width: 500px) {
 			height: $height-narrow;
 			line-height: $height-narrow;
-			padding-left: 16px;
+			padding-inline-start: 16px;
 
 			> button {
 				height: $height-narrow;
@@ -208,7 +208,7 @@ function onContextmenu(ev: MouseEvent) {
 			flex: 1;
 
 			> .icon {
-				margin-right: 0.5em;
+				margin-inline-end: 0.5em;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index cab0f07a7..a7bc4765a 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -148,7 +148,7 @@ defineExpose({
 		> .title {
 			flex: 1;
 			line-height: $height;
-			padding-left: 32px;
+			padding-inline-start: 32px;
 			font-weight: bold;
 			white-space: nowrap;
 			overflow: hidden;
@@ -157,12 +157,12 @@ defineExpose({
 
 			@media (max-width: 500px) {
 				line-height: $height-narrow;
-				padding-left: 16px;
+				padding-inline-start: 16px;
 			}
 		}
 
 		> button + .title {
-			padding-left: 0;
+			padding-inline-start: 0;
 		}
 	}
 
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/MkMoved.vue
index abb2d14ab..88eeac25c 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -1,6 +1,9 @@
 <template>
 	<div class="msjugskd _block">
-		<i :class="icon('ph-airplane-takeoff')" style="margin-right: 8px" />
+		<i
+			:class="icon('ph-airplane-takeoff')"
+			style="margin-inline-end: 8px"
+		/>
 		{{ i18n.ts.accountMoved }}
 		<MkMention class="link" :username="acct" :host="host" />
 	</div>
@@ -26,7 +29,7 @@ defineProps<{
 	border-radius: var(--radius);
 
 	> .link {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 		color: var(--accent);
 	}
 }
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index f42642f66..95a99c826 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -693,8 +693,8 @@ defineExpose({
 			position: absolute;
 			z-index: 10;
 			top: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			bottom: 0;
 			margin: auto;
 			width: calc(100% - 8px);
@@ -721,8 +721,8 @@ defineExpose({
 				display: block;
 				margin-bottom: -4px;
 				margin-top: 16px;
-				border-left: 2px solid currentColor;
-				margin-left: calc((var(--avatarSize) / 2) - 1px);
+				border-inline-start: 2px solid currentColor;
+				margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
 				opacity: 0.25;
 			}
 		}
@@ -747,14 +747,14 @@ defineExpose({
 			z-index: 2;
 			width: 0;
 			display: flex;
-			margin-right: 0;
+			margin-inline-end: 0;
 			margin-top: 0;
 			flex-grow: 0;
 			pointer-events: none;
 		}
 
 		> div > i {
-			margin-left: -0.5px;
+			margin-inline-start: -0.5px;
 		}
 		> .info {
 			display: flex;
@@ -764,11 +764,11 @@ defineExpose({
 			color: #f6c177;
 
 			> i {
-				margin-right: 4px;
+				margin-inline-end: 4px;
 			}
 
 			> .hide {
-				margin-left: auto;
+				margin-inline-start: auto;
 				color: inherit;
 			}
 		}
@@ -781,7 +781,7 @@ defineExpose({
 			cursor: pointer;
 
 			> i {
-				margin-right: 4px;
+				margin-inline-end: 4px;
 			}
 
 			> span {
@@ -796,7 +796,7 @@ defineExpose({
 			}
 
 			> .info {
-				margin-left: auto;
+				margin-inline-start: auto;
 				font-size: 0.9em;
 				display: flex;
 
@@ -806,7 +806,7 @@ defineExpose({
 					display: inline-flex;
 					align-items: center;
 					> .dropdownIcon {
-						margin-right: 4px;
+						margin-inline-end: 4px;
 					}
 				}
 			}
@@ -818,9 +818,9 @@ defineExpose({
 				&::after {
 					content: "";
 					position: absolute;
-					border-left: 2px solid currentColor;
+					border-inline-start: 2px solid currentColor;
 					border-top: 2px solid currentColor;
-					margin-left: calc(var(--avatarSize) / 2 - 1px);
+					margin-inline-start: calc(var(--avatarSize) / 2 - 1px);
 					width: calc(var(--avatarSize) / 2 + 14px);
 					border-top-left-radius: calc(var(--avatarSize) / 4);
 					top: calc(50% - 1px);
@@ -836,7 +836,7 @@ defineExpose({
 				height: 1.2em;
 				border-radius: 2em;
 				overflow: hidden;
-				margin-right: 0.4em;
+				margin-inline-end: 0.4em;
 				background: var(--panelHighlight);
 			}
 			.username {
@@ -884,7 +884,7 @@ defineExpose({
 				height: var(--avatarSize);
 				position: relative;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 			}
 			> .header {
 				width: 0;
@@ -956,7 +956,7 @@ defineExpose({
 						transition: background 0.2s;
 					}
 					&:first-of-type {
-						margin-left: -0.5em;
+						margin-inline-start: -0.5em;
 						&::before {
 							border-radius: 100px 0 0 100px;
 						}
@@ -1003,7 +1003,7 @@ defineExpose({
 				margin-top: 0px;
 			}
 			> .line {
-				margin-right: 0;
+				margin-inline-end: 0;
 				&::before {
 					margin-top: 8px;
 				}
@@ -1016,7 +1016,7 @@ defineExpose({
 				padding-top: 104px;
 			}
 			> .main > .header-container > .avatar {
-				margin-right: 10px;
+				margin-inline-end: 10px;
 				// top: calc(14px + var(--stickyTop, 0px));
 			}
 		}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 0bbae02e4..f74121b20 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -500,8 +500,8 @@ onUnmounted(() => {
 			position: absolute;
 			z-index: 10;
 			top: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			bottom: 0;
 			margin: auto;
 			width: calc(100% - 8px);
@@ -539,7 +539,7 @@ onUnmounted(() => {
 
 	> :deep(.chips) {
 		padding-block: 6px 12px;
-		padding-left: 32px;
+		padding-inline-start: 32px;
 		&:last-child {
 			margin-bottom: 12px;
 		}
@@ -651,7 +651,7 @@ onUnmounted(() => {
 			padding: 12px 0 0 0;
 			font-size: 1.05rem;
 			> .header > .body {
-				padding-left: 10px;
+				padding-inline-start: 10px;
 			}
 		}
 		> .clips,
@@ -660,7 +660,7 @@ onUnmounted(() => {
 			padding-inline: 16px !important;
 		}
 		> :deep(.underline) {
-			padding-left: 16px !important;
+			padding-inline-start: 16px !important;
 		}
 	}
 
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 5f580faad..ef6b82b65 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -31,7 +31,7 @@
 								})
 							"
 							:class="icon('ph-pencil', false)"
-							style="margin-left: 0.4rem"
+							style="margin-inline-start: 0.4rem"
 						></i>
 					</MkA>
 					<MkVisibility :note="note" />
@@ -97,7 +97,7 @@ function openServerInfo() {
 	> .avatar {
 		width: 3.7em;
 		height: 3.7em;
-		margin-right: 1em;
+		margin-inline-end: 1em;
 	}
 	> .user-info {
 		width: 0;
@@ -166,7 +166,7 @@ function openServerInfo() {
 		.info {
 			display: inline-flex;
 			flex-shrink: 0;
-			margin-left: 0.5em;
+			margin-inline-start: 0.5em;
 			font-size: 0.9em;
 			.created-at {
 				max-width: 100%;
@@ -177,7 +177,7 @@ function openServerInfo() {
 
 		.ticker {
 			display: inline-flex;
-			margin-left: 0.5em;
+			margin-inline-start: 0.5em;
 			vertical-align: middle;
 			> .name {
 				display: none;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 62bcc0f0c..1c0e69541 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -79,7 +79,7 @@ defineProps<{
 				overflow-wrap: break-word;
 
 				> .text {
-					margin-right: 8px;
+					margin-inline-end: 8px;
 				}
 			}
 
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 53ff99ed6..b03e3fc03 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -483,7 +483,7 @@ function noteClick(e) {
 	outline: none;
 	&.children {
 		padding: 10px 0 0 var(--indent);
-		padding-left: var(--indent) !important;
+		padding-inline-start: var(--indent) !important;
 		font-size: 1em;
 		cursor: auto;
 
@@ -496,7 +496,7 @@ function noteClick(e) {
 		display: flex;
 
 		> .avatar-container {
-			margin-right: 8px;
+			margin-inline-end: 8px;
 			z-index: 2;
 			> .avatar {
 				flex-shrink: 0;
@@ -561,7 +561,7 @@ function noteClick(e) {
 						transition: background 0.2s;
 					}
 					&:first-of-type {
-						margin-left: -0.5em;
+						margin-inline-start: -0.5em;
 						&::before {
 							border-radius: 100px 0 0 100px;
 						}
@@ -607,19 +607,19 @@ function noteClick(e) {
 	&.reply,
 	&.reply-to {
 		> .main > .body {
-			margin-right: -24px;
-			padding-right: 24px;
+			margin-inline-end: -24px;
+			padding-inline-end: 24px;
 			margin-top: -12px;
 			padding-top: 12px;
-			margin-left: calc(0px - var(--avatarSize) - 32px);
-			padding-left: calc(var(--avatarSize) + 32px);
+			margin-inline-start: calc(0px - var(--avatarSize) - 32px);
+			padding-inline-start: calc(var(--avatarSize) + 32px);
 			border-radius: var(--radius);
 		}
 	}
 	&.reply-to {
 		> .main > .body {
-			margin-left: calc(0px - var(--avatarSize) - 38px);
-			padding-left: calc(var(--avatarSize) + 38px);
+			margin-inline-start: calc(0px - var(--avatarSize) - 38px);
+			padding-inline-start: calc(var(--avatarSize) + 38px);
 			margin-top: -16px;
 			padding-top: 16px;
 		}
@@ -627,7 +627,7 @@ function noteClick(e) {
 	&.reply {
 		--avatarSize: 38px;
 		.avatar-container {
-			margin-right: 8px !important;
+			margin-inline-end: 8px !important;
 		}
 	}
 	> .reply,
@@ -651,7 +651,7 @@ function noteClick(e) {
 			flex-grow: 0 !important;
 			margin-top: -10px !important;
 			margin-bottom: 10px !important;
-			margin-right: 10px !important;
+			margin-inline-end: 10px !important;
 			&::before {
 				border-left-style: dashed !important;
 				border-bottom-left-radius: 100px !important;
@@ -706,7 +706,7 @@ function noteClick(e) {
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-				margin-right: 14px;
+				margin-inline-end: 14px;
 				width: var(--avatarSize);
 				> .avatar {
 					width: var(--avatarSize);
@@ -727,8 +727,8 @@ function noteClick(e) {
 			&::before {
 				content: "";
 				position: absolute;
-				border-left: 2px solid currentColor;
-				margin-left: calc((var(--avatarSize) / 2) - 1px);
+				border-inline-start: 2px solid currentColor;
+				margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				inset-block: 0;
 				min-height: 8px;
@@ -753,7 +753,7 @@ function noteClick(e) {
 		> .line {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			bottom: 0;
 		}
 	}
@@ -763,15 +763,15 @@ function noteClick(e) {
 		> .line {
 			position: absolute;
 			z-index: 2;
-			left: 0;
+			inset-inline-start: 0;
 			top: 0;
 			opacity: 0.25;
 			&::after {
 				content: "";
 				position: absolute;
-				border-left: 2px solid currentColor;
+				border-inline-start: 2px solid currentColor;
 				border-bottom: 2px solid currentColor;
-				margin-left: calc((var(--avatarSize) / 2) - 1px);
+				margin-inline-start: calc((var(--avatarSize) / 2) - 1px);
 				width: calc(var(--indent) / 2);
 				height: calc((var(--avatarSize) / 2));
 				border-bottom-left-radius: calc(var(--indent) / 2);
@@ -794,7 +794,7 @@ function noteClick(e) {
 		// 	border-top: 1px solid var(--X13);
 		// 	position: absolute;
 		// 	bottom: 0;
-		// 	margin-left: calc(var(--avatarSize) + 12px);
+		// 	margin-inline-start: calc(var(--avatarSize) + 12px);
 		// 	inset-inline: 0;
 		// }
 	}
@@ -822,7 +822,7 @@ function noteClick(e) {
 				--indent: 35px;
 			}
 			> .children:not(.single) {
-				padding-left: 28px !important;
+				padding-inline-start: 28px !important;
 			}
 		}
 		&.reply-to {
@@ -833,7 +833,7 @@ function noteClick(e) {
 			margin-bottom: 0 !important;
 		}
 		> .main > .avatar-container {
-			margin-right: 10px;
+			margin-inline-end: 10px;
 		}
 		&:first-child > .main > .body {
 			margin-top: -20px;
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 7c158d061..71173edac 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -399,7 +399,7 @@ useTooltip(reactionRef, (showing) => {
 		flex-shrink: 0;
 		width: 42px;
 		height: 42px;
-		margin-right: 8px;
+		margin-inline-end: 8px;
 
 		> .icon {
 			display: block;
@@ -412,7 +412,7 @@ useTooltip(reactionRef, (showing) => {
 			position: absolute;
 			z-index: 1;
 			bottom: -2px;
-			right: -2px;
+			inset-inline-end: -2px;
 			width: 20px;
 			height: 20px;
 			box-sizing: border-box;
@@ -496,7 +496,7 @@ useTooltip(reactionRef, (showing) => {
 			}
 
 			> .time {
-				margin-left: auto;
+				margin-inline-start: auto;
 				font-size: 0.9em;
 			}
 		}
@@ -520,11 +520,11 @@ useTooltip(reactionRef, (showing) => {
 			}
 
 			> i:first-child {
-				margin-right: 4px;
+				margin-inline-end: 4px;
 			}
 
 			> i:last-child {
-				margin-left: 4px;
+				margin-inline-start: 4px;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index c5ca37d36..54d66ad2a 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -53,7 +53,7 @@ onMounted(() => {
 
 .mk-notification-toast {
 	position: fixed;
-	left: 0;
+	inset-inline-start: 0;
 	width: 250px;
 	top: 32px;
 	padding: 0 32px;
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/MkObjectView.value.vue
index 99836f222..aa384a8e0 100644
--- a/packages/client/src/components/MkObjectView.value.vue
+++ b/packages/client/src/components/MkObjectView.value.vue
@@ -150,7 +150,7 @@ export default defineComponent({
 
 		> .element {
 			display: block;
-			padding-left: 16px;
+			padding-inline-start: 16px;
 		}
 	}
 
@@ -164,7 +164,7 @@ export default defineComponent({
 
 		> .kv {
 			display: block;
-			padding-left: 16px;
+			padding-inline-start: 16px;
 
 			> .toggle {
 				width: 16px;
@@ -178,7 +178,7 @@ export default defineComponent({
 
 			> .k {
 				display: inline;
-				margin-right: 8px;
+				margin-inline-end: 8px;
 			}
 
 			> .v {
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
index 034c6fed6..eee861d0d 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -71,7 +71,7 @@ defineProps<{
 		}
 
 		& + article {
-			left: 100px;
+			inset-inline-start: 100px;
 			width: calc(100% - 100px);
 		}
 	}
@@ -103,7 +103,7 @@ defineProps<{
 				display: inline-block;
 				width: 16px;
 				height: 16px;
-				margin-right: 4px;
+				margin-inline-end: 4px;
 				vertical-align: top;
 			}
 
@@ -125,7 +125,7 @@ defineProps<{
 			height: 100px;
 
 			& + article {
-				left: 0;
+				inset-inline-start: 0;
 				width: 100%;
 			}
 		}
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index d237f1809..0c00cd8ef 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -17,7 +17,7 @@
 					v-if="pageMetadata.value.icon"
 					class="icon"
 					:class="pageMetadata.value.icon"
-					style="margin-right: 0.5em"
+					style="margin-inline-end: 0.5em"
 				></i>
 				<span>{{ pageMetadata.value.title }}</span>
 			</template>
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index da8e7e7ed..f12e7ed17 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -491,8 +491,8 @@ defineExpose({
 
 .cxiknjgy {
 	> .button {
-		margin-left: auto;
-		margin-right: auto;
+		margin-inline-start: auto;
+		margin-inline-end: auto;
 	}
 }
 .list > :deep(._button) {
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 48211f171..8b66ed231 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -167,7 +167,7 @@ const vote = async (id) => {
 			> .backdrop {
 				position: absolute;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				height: 100%;
 				background: var(--accent);
 				background: linear-gradient(
@@ -186,12 +186,12 @@ const vote = async (id) => {
 				border-radius: 3px;
 
 				> i {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 					color: var(--accent);
 				}
 
 				> .votes {
-					margin-left: 4px;
+					margin-inline-start: 4px;
 					opacity: 0.7;
 				}
 			}
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index 622ac7fd9..abacb4130 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -195,7 +195,7 @@ watch(
 		color: #f00;
 
 		> i {
-			margin-right: 4px;
+			margin-inline-end: 4px;
 		}
 	}
 
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 175e6412a..917eee7ea 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -99,7 +99,9 @@
 				</button>
 			</div>
 			<div v-if="visibility === 'specified'" class="to-specified">
-				<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
+				<span style="margin-inline-end: 8px">{{
+					i18n.ts.recipient
+				}}</span>
 				<div class="visibleUsers">
 					<span v-for="u in visibleUsers" :key="u.id">
 						<MkAcct :user="u" />
@@ -1120,7 +1122,7 @@ onMounted(() => {
 		> .right {
 			position: absolute;
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 			display: flex;
 			align-items: center;
 
@@ -1135,7 +1137,7 @@ onMounted(() => {
 				margin: 0 0 0 8px;
 
 				& + .localOnly {
-					margin-left: 0 !important;
+					margin-inline-start: 0 !important;
 				}
 
 				> span:only-child > i {
@@ -1182,7 +1184,7 @@ onMounted(() => {
 				}
 
 				> i {
-					margin-left: 6px;
+					margin-inline-start: 6px;
 				}
 			}
 		}
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index a879bd5d8..ea051c58c 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -172,7 +172,7 @@ function showFileMenu(file, ev: MouseEvent) {
 			position: relative;
 			width: 64px;
 			height: 64px;
-			margin-right: 4px;
+			margin-inline-end: 4px;
 			border-radius: 4px;
 			cursor: move;
 
@@ -193,7 +193,7 @@ function showFileMenu(file, ev: MouseEvent) {
 				width: 64px;
 				height: 64px;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				z-index: 2;
 				background: var(--header);
 				color: var(--fg);
@@ -209,7 +209,7 @@ function showFileMenu(file, ev: MouseEvent) {
 		display: block;
 		position: absolute;
 		top: 8px;
-		right: 8px;
+		inset-inline-end: 8px;
 		margin: 0;
 		padding: 0;
 	}
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index baa09d71e..24189e0fc 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -51,7 +51,7 @@ function quote(): void {
 
 	> .count {
 		display: inline;
-		margin-left: 8px;
+		margin-inline-start: 8px;
 		opacity: 0.7;
 	}
 }
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
index f906c1b00..dbce566a3 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -18,7 +18,7 @@
 					:custom-emojis="note.emojis"
 					style="max-width: 100%"
 				/>
-				<span style="margin-left: 4px">{{
+				<span style="margin-inline-start: 4px">{{
 					note.reactions[reaction]
 				}}</span>
 			</button>
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 0d992ae43..3eb5edf72 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -69,11 +69,11 @@ const emit = defineEmits<{
 		flex: 1;
 		min-width: 0;
 		font-size: 0.95em;
-		border-left: solid 0.5px var(--divider);
-		padding-left: 10px;
-		margin-left: 10px;
-		margin-right: 14px;
-		text-align: left;
+		border-inline-start: solid 0.5px var(--divider);
+		padding-inline-start: 10px;
+		margin-inline-start: 10px;
+		margin-inline-end: 14px;
+		text-align: initial;
 
 		> .user {
 			line-height: 24px;
@@ -88,7 +88,7 @@ const emit = defineEmits<{
 			> .avatar {
 				width: 24px;
 				height: 24px;
-				margin-right: 3px;
+				margin-inline-end: 3px;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index 23a7a731b..64d5f98ea 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/packages/client/src/components/MkRemoteCaution.vue
@@ -28,7 +28,7 @@ defineProps<{
 	border-radius: var(--radius);
 
 	> .link {
-		margin-left: 4px;
+		margin-inline-start: 4px;
 		color: var(--accent);
 	}
 }
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 9b817e126..67a134358 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -39,7 +39,7 @@ defineExpose({
 	display: block;
 	position: absolute;
 	bottom: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	padding: 20px;
 	margin-bottom: -10px;
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
index f97a9d686..5bb484e39 100644
--- a/packages/client/src/components/MkSparkle.vue
+++ b/packages/client/src/components/MkSparkle.vue
@@ -138,7 +138,7 @@ onUnmounted(() => {
 	> svg {
 		position: absolute;
 		top: -32px;
-		left: -32px;
+		inset-inline-start: -32px;
 		pointer-events: none;
 	}
 }
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index a3b6e4408..5b134e957 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -35,7 +35,7 @@
 		/>
 	</p>
 	<div class="wrmlmaau">
-		<div
+		<bdi
 			class="content"
 			:class="{
 				collapsed,
@@ -154,7 +154,7 @@
 				v-model="showContent"
 				:note="note"
 			/>
-		</div>
+		</bdi>
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
 			mini
@@ -270,7 +270,7 @@ function focusFooter(ev) {
 	display: inline-block;
 	border-radius: 6px;
 	padding: 0.2em 0.2em;
-	margin-right: 0.2em;
+	margin-inline-end: 0.2em;
 	color: var(--accent);
 	transition: background 0.2s;
 	&:hover,
@@ -286,7 +286,7 @@ function focusFooter(ev) {
 	margin-bottom: 10px;
 	overflow-wrap: break-word;
 	> .text {
-		margin-right: 8px;
+		margin-inline-end: 8px;
 	}
 }
 
@@ -296,7 +296,7 @@ function focusFooter(ev) {
 		> .body {
 			transition: filter 0.1s;
 			> .rp {
-				margin-left: 4px;
+				margin-inline-start: 4px;
 				font-style: oblique;
 				color: var(--renote);
 			}
@@ -304,7 +304,7 @@ function focusFooter(ev) {
 				display: inline-block;
 				border-radius: 6px;
 				padding: 0.2em 0.2em;
-				margin-right: 0.2em;
+				margin-inline-end: 0.2em;
 				color: var(--accent);
 				transition: background 0.2s;
 				&:hover,
@@ -393,8 +393,8 @@ function focusFooter(ev) {
 	}
 	> :deep(button) {
 		margin-top: 10px;
-		margin-left: 0;
-		margin-right: 0.4rem;
+		margin-inline-start: 0;
+		margin-inline-end: 0.4rem;
 	}
 	> .fade {
 		position: absolute;
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index ac7cdc011..f761b6192 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -113,7 +113,7 @@ export default defineComponent({
 
 				> .icon {
 					width: 32px;
-					margin-right: 2px;
+					margin-inline-end: 2px;
 					flex-shrink: 0;
 					text-align: center;
 					opacity: 0.8;
@@ -123,7 +123,7 @@ export default defineComponent({
 					white-space: nowrap;
 					text-overflow: ellipsis;
 					overflow: hidden;
-					padding-right: 12px;
+					padding-inline-end: 12px;
 				}
 			}
 		}
@@ -136,8 +136,8 @@ export default defineComponent({
 				border-top: none;
 			}
 
-			margin-left: 0;
-			margin-right: 0;
+			margin-inline-start: 0;
+			margin-inline-end: 0;
 
 			> .title {
 				font-size: 1em;
@@ -160,13 +160,13 @@ export default defineComponent({
 
 					> .icon {
 						display: block;
-						margin-right: 0;
+						margin-inline-end: 0;
 						margin-bottom: 12px;
 						font-size: 1.5em;
 					}
 
 					> .text {
-						padding-right: 0;
+						padding-inline-end: 0;
 						width: 100%;
 						font-size: 0.8em;
 					}
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 8e3108ecb..7891b5b71 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -81,11 +81,11 @@ export default defineComponent({
 		}
 
 		&:not(:first-child) {
-			margin-left: 8px;
+			margin-inline-start: 8px;
 		}
 
 		> .icon {
-			margin-right: 6px;
+			margin-inline-end: 6px;
 		}
 
 		&:empty {
@@ -104,7 +104,7 @@ export default defineComponent({
 			black calc(100% - 90px),
 			transparent
 		);
-		padding-right: 90px !important;
+		padding-inline-end: 90px !important;
 		white-space: nowrap;
 
 		&::-webkit-scrollbar {
@@ -116,7 +116,7 @@ export default defineComponent({
 			align-items: center;
 			flex: unset;
 			margin: 0;
-			margin-right: 8px;
+			margin-inline-end: 8px;
 			padding: 0.5em 1em;
 			border-radius: 100px;
 			background: var(--buttonBg);
@@ -124,7 +124,7 @@ export default defineComponent({
 				margin-top: -0.1em;
 			}
 			> .count {
-				margin-right: -0.2em;
+				margin-inline-end: -0.2em;
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index 3a40fbde6..d89124249 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -111,7 +111,7 @@ defineExpose({
 	> .tags {
 		position: absolute;
 		top: 999px;
-		left: 999px;
+		inset-inline-start: 999px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 57a7600e4..532fe940c 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -333,9 +333,9 @@ defineExpose({
 			z-index: -1;
 		}
 		i {
-			margin-left: 0.7em;
-			border-left: 1px solid var(--accentedBg);
-			padding-left: 0.4em;
+			margin-inline-start: 0.7em;
+			border-inline-start: 1px solid var(--accentedBg);
+			padding-inline-start: 0.4em;
 		}
 	}
 }
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 5ee7e5005..351fb1778 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -56,8 +56,8 @@ onMounted(() => {
 .mk-toast {
 	> .body {
 		position: fixed;
-		left: 0;
-		right: 0;
+		inset-inline-start: 0;
+		inset-inline-end: 0;
 		top: 0;
 		margin: 0 auto;
 		margin-top: 16px;
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index d73cf1552..ea88d3f13 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -305,11 +305,11 @@ function close(res) {
 				}
 
 				&:first-child {
-					padding-right: 8px;
+					padding-inline-end: 8px;
 				}
 
 				&:last-child {
-					padding-left: 8px;
+					padding-inline-start: 8px;
 				}
 			}
 
@@ -319,7 +319,7 @@ function close(res) {
 		}
 
 		> .ok {
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 	}
 }
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 8632ce717..89a232e21 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -267,7 +267,7 @@ onUnmounted(() => {
 				overflow: hidden;
 				> span {
 					font-weight: 600;
-					margin-right: 0.4em;
+					margin-inline-end: 0.4em;
 				}
 			}
 		}
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 90349fb41..943ed8120 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -55,7 +55,7 @@ const props = withDefaults(
 		display: block;
 		width: ($bodyTitleHieght + $bodyInfoHieght);
 		height: ($bodyTitleHieght + $bodyInfoHieght);
-		margin-right: 12px;
+		margin-inline-end: 12px;
 	}
 
 	> :global(.body) {
@@ -63,7 +63,7 @@ const props = withDefaults(
 		overflow: hidden;
 		font-size: 0.9em;
 		color: var(--fg);
-		padding-right: 8px;
+		padding-inline-end: 8px;
 
 		> :global(.name) {
 			display: block;
@@ -88,7 +88,7 @@ const props = withDefaults(
 		// > :global(.moderation) {
 		// 	display: flex;
 		// 	gap: 1rem;
-		// 	margin-right: 1rem;
+		// 	margin-inline-end: 1rem;
 		// }
 	}
 
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 25af3ac12..84d9a3af1 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -34,7 +34,7 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 .beaffaef {
 	font-size: 0.9em;
-	text-align: left;
+	text-align: initial;
 
 	> .user {
 		line-height: 24px;
@@ -49,7 +49,7 @@ const emit = defineEmits<{
 		> .avatar {
 			width: 24px;
 			height: 24px;
-			margin-right: 3px;
+			margin-inline-end: 3px;
 		}
 	}
 }
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 34da3c2e5..b9ff257f7 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -79,6 +79,6 @@ if (
 <style lang="scss" module>
 .visibility,
 .localOnly {
-	margin-left: 0.5em;
+	margin-inline-start: 0.5em;
 }
 </style>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 7a9ace082..912850158 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -202,7 +202,7 @@ function choose(
 	display: flex;
 	padding: 8px 14px;
 	font-size: 12px;
-	text-align: left;
+	text-align: initial;
 	width: 100%;
 	box-sizing: border-box;
 
@@ -229,7 +229,7 @@ function choose(
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	margin-right: 10px;
+	margin-inline-end: 10px;
 	width: 16px;
 	top: 0;
 	bottom: 0;
@@ -258,7 +258,7 @@ function choose(
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	margin-left: 10px;
+	margin-inline-start: 10px;
 	width: 16px;
 	top: 0;
 	bottom: 0;
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 0991cefc4..32b9e8011 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -207,11 +207,11 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		}
 
 		> .config {
-			right: 8px + 8px + 32px;
+			inset-inline-end: 8px + 8px + 32px;
 		}
 
 		> .remove {
-			right: 8px;
+			inset-inline-end: 8px;
 		}
 
 		> .handle {
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 102ff2447..608c8f70f 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -530,7 +530,7 @@ defineExpose({
 .ebkgocck {
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 
 	> .body {
 		overflow: clip;
@@ -578,7 +578,7 @@ defineExpose({
 			}
 
 			> .left {
-				margin-right: 16px;
+				margin-inline-end: 16px;
 			}
 
 			> .right {
@@ -615,7 +615,7 @@ defineExpose({
 
 		&.top {
 			top: -($size);
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: $size;
 			cursor: ns-resize;
@@ -623,7 +623,7 @@ defineExpose({
 
 		&.right {
 			top: 0;
-			right: -($size);
+			inset-inline-end: -($size);
 			width: $size;
 			height: 100%;
 			cursor: ew-resize;
@@ -631,7 +631,7 @@ defineExpose({
 
 		&.bottom {
 			bottom: -($size);
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: $size;
 			cursor: ns-resize;
@@ -639,7 +639,7 @@ defineExpose({
 
 		&.left {
 			top: 0;
-			left: -($size);
+			inset-inline-start: -($size);
 			width: $size;
 			height: 100%;
 			cursor: ew-resize;
@@ -647,7 +647,7 @@ defineExpose({
 
 		&.top-left {
 			top: -($size);
-			left: -($size);
+			inset-inline-start: -($size);
 			width: $size * 2;
 			height: $size * 2;
 			cursor: nwse-resize;
@@ -655,7 +655,7 @@ defineExpose({
 
 		&.top-right {
 			top: -($size);
-			right: -($size);
+			inset-inline-end: -($size);
 			width: $size * 2;
 			height: $size * 2;
 			cursor: nesw-resize;
@@ -663,7 +663,7 @@ defineExpose({
 
 		&.bottom-right {
 			bottom: -($size);
-			right: -($size);
+			inset-inline-end: -($size);
 			width: $size * 2;
 			height: $size * 2;
 			cursor: nwse-resize;
@@ -671,7 +671,7 @@ defineExpose({
 
 		&.bottom-left {
 			bottom: -($size);
-			left: -($size);
+			inset-inline-start: -($size);
 			width: $size * 2;
 			height: $size * 2;
 			cursor: nesw-resize;
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index 78a6f68f4..ed862e681 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -104,7 +104,7 @@ const toggle = () => {
 	}
 
 	> .label {
-		margin-left: 12px;
+		margin-inline-start: 12px;
 		margin-top: 2px;
 		display: block;
 		transition: inherit;
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index c289701d8..40a61d19c 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -53,7 +53,7 @@ const opened = ref(props.defaultOpen);
 		}
 
 		> .icon {
-			margin-right: 0.75em;
+			margin-inline-end: 0.75em;
 			flex-shrink: 0;
 			text-align: center;
 			opacity: 0.8;
@@ -62,7 +62,7 @@ const opened = ref(props.defaultOpen);
 				display: none;
 
 				& + .text {
-					padding-left: 4px;
+					padding-inline-start: 4px;
 				}
 			}
 		}
@@ -71,16 +71,16 @@ const opened = ref(props.defaultOpen);
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			padding-right: 12px;
+			padding-inline-end: 12px;
 		}
 
 		> .right {
-			margin-left: auto;
+			margin-inline-start: auto;
 			opacity: 0.7;
 			white-space: nowrap;
 
 			> .text:not(:empty) {
-				margin-right: 0.75em;
+				margin-inline-end: 0.75em;
 			}
 		}
 	}
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index e54302ed9..7a48c8d4f 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -259,13 +259,13 @@ defineExpose({
 			}
 
 			> .prefix {
-				left: 0;
-				padding-right: 6px;
+				inset-inline-start: 0;
+				padding-inline-end: 6px;
 			}
 
 			> .suffix {
-				right: 0;
-				padding-left: 6px;
+				inset-inline-end: 0;
+				padding-inline-start: 6px;
 			}
 
 			&.inline {
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index f20d37dc2..01a5e56a6 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -66,7 +66,7 @@ defineProps<{
 		}
 
 		> .icon {
-			margin-right: 0.75em;
+			margin-inline-end: 0.75em;
 			flex-shrink: 0;
 			text-align: center;
 			color: var(--fgTransparentWeak);
@@ -75,7 +75,7 @@ defineProps<{
 				display: none;
 
 				& + .text {
-					padding-left: 4px;
+					padding-inline-start: 4px;
 				}
 			}
 		}
@@ -84,16 +84,16 @@ defineProps<{
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			padding-right: 12px;
+			padding-inline-end: 12px;
 		}
 
 		> .right {
-			margin-left: auto;
+			margin-inline-start: auto;
 			opacity: 0.7;
 			white-space: nowrap;
 
 			> .text:not(:empty) {
-				margin-right: 0.75em;
+				margin-inline-end: 0.75em;
 			}
 		}
 	}
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index 2c6d59bb2..778308630 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -38,7 +38,7 @@ function toggle(x) {
 .novjtctn {
 	position: relative;
 	display: inline-block;
-	text-align: left;
+	text-align: initial;
 	cursor: pointer;
 	padding: 8px 10px;
 	min-width: 60px;
@@ -112,9 +112,9 @@ function toggle(x) {
 			display: block;
 			position: absolute;
 			top: 3px;
-			right: 3px;
+			inset-inline-end: 3px;
 			bottom: 3px;
-			left: 3px;
+			inset-inline-start: 3px;
 			border-radius: 100%;
 			opacity: 0;
 			transform: scale(0);
@@ -123,7 +123,7 @@ function toggle(x) {
 	}
 
 	> .label {
-		margin-left: 28px;
+		margin-inline-start: 28px;
 		display: block;
 		line-height: 20px;
 		cursor: pointer;
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 6ad9967bc..a933847ac 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -282,13 +282,13 @@ function show(ev: MouseEvent) {
 		}
 
 		> .prefix {
-			left: 0;
-			padding-right: 6px;
+			inset-inline-start: 0;
+			padding-inline-end: 6px;
 		}
 
 		> .suffix {
-			right: 0;
-			padding-left: 6px;
+			inset-inline-end: 0;
+			padding-inline-start: 6px;
 		}
 
 		&.inline {
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 2b7c7663c..d8dd038fa 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -73,7 +73,7 @@ function toggle(x) {
 		> .knob {
 			position: absolute;
 			top: 3px;
-			left: 3px;
+			inset-inline-start: 3px;
 			width: 15px;
 			height: 15px;
 			background: var(--swutchOffFg);
@@ -92,7 +92,7 @@ function toggle(x) {
 	}
 
 	> .label {
-		margin-left: 12px;
+		margin-inline-start: 12px;
 		margin-top: 2px;
 		display: block;
 		transition: inherit;
@@ -126,7 +126,7 @@ function toggle(x) {
 		border-color: var(--swutchOnBg) !important;
 
 		> .knob {
-			left: 12px;
+			inset-inline-start: 12px;
 			background: var(--swutchOnFg);
 		}
 	}
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 542070aa8..619b42260 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -158,7 +158,7 @@ function reduceFrequency(): void {
 			> .menu {
 				position: absolute;
 				top: 1px;
-				right: 1px;
+				inset-inline-end: 1px;
 
 				> .info-circle {
 					border: 3px solid var(--panel);
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index acda80be2..7c3616db3 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -144,8 +144,8 @@ watch(
 	> .inner {
 		position: absolute;
 		bottom: 0;
-		left: 0;
-		right: 0;
+		inset-inline-start: 0;
+		inset-inline-end: 0;
 		top: 0;
 		border-radius: 100%;
 		z-index: 1;
@@ -159,7 +159,7 @@ watch(
 		position: absolute;
 		z-index: 1;
 		bottom: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 18%;
 		height: 18%;
 	}
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index e5709d95c..7a30cbd27 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -112,7 +112,7 @@ const props = withDefaults(
 .spinner {
 	position: absolute;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	z-index: 999;
 	width: var(--size);
 	height: var(--size);
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 7c5d1adf9..406e29141 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -354,9 +354,9 @@ const props = withDefaults(
 	::v-deep(blockquote) {
 		display: block;
 		margin: 8px 0;
-		padding-left: 12px;
+		padding-inline-start: 12px;
 		color: var(--fgTransparentWeak);
-		border-left: solid 4px var(--fgTransparent);
+		border-inline-start: solid 4px var(--fgTransparent);
 	}
 
 	::v-deep(pre) {
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index c68c2695f..17698ffbc 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -374,13 +374,13 @@ onUnmounted(() => {
 		display: flex;
 		> .buttons {
 			&:not(:empty) {
-				margin-right: 8px;
-				margin-left: calc(0px - var(--margin));
+				margin-inline-end: 8px;
+				margin-inline-start: calc(0px - var(--margin));
 			}
 			> .avatar {
 				width: 32px;
 				height: 32px;
-				margin-left: var(--margin);
+				margin-inline-start: var(--margin);
 			}
 		}
 	}
@@ -393,16 +393,16 @@ onUnmounted(() => {
 		&.right {
 			justify-content: flex-end;
 			z-index: 2;
-			// margin-right: calc(0px - var(--margin));
-			// margin-left: var(--margin);
+			// margin-inline-end: calc(0px - var(--margin));
+			// margin-inline-start: var(--margin);
 			> .button:last-child {
-				margin-right: calc(0px - var(--margin));
+				margin-inline-end: calc(0px - var(--margin));
 			}
 		}
 
 		> .fullButton {
 			& + .fullButton {
-				margin-left: 12px;
+				margin-inline-start: 12px;
 			}
 		}
 	}
@@ -419,7 +419,7 @@ onUnmounted(() => {
 			max-width: 400px;
 			overflow: auto;
 			white-space: nowrap;
-			text-align: left;
+			text-align: initial;
 			font-weight: bold;
 			flex-shrink: 0;
 			> .avatar {
@@ -428,11 +428,11 @@ onUnmounted(() => {
 				width: $size;
 				height: $size;
 				vertical-align: bottom;
-				margin-right: 8px;
+				margin-inline-end: 8px;
 			}
 
 			> .icon {
-				margin-right: 8px;
+				margin-inline-end: 8px;
 				min-width: 16px;
 				width: 1em;
 				text-align: center;
@@ -458,7 +458,7 @@ onUnmounted(() => {
 
 						> .chevron {
 							display: inline-block;
-							margin-left: 6px;
+							margin-inline-start: 6px;
 						}
 					}
 				}
@@ -474,14 +474,14 @@ onUnmounted(() => {
 	}
 	> .left {
 		min-width: 20%;
-		margin-left: -10px;
-		padding-left: 10px;
+		margin-inline-start: -10px;
+		padding-inline-start: 10px;
 	}
 	> .right {
-		// margin-left: auto;
+		// margin-inline-start: auto;
 		min-width: max-content;
-		margin-right: -10px;
-		padding-right: 10px;
+		margin-inline-end: -10px;
+		padding-inline-end: 10px;
 	}
 
 	> .tabs {
@@ -555,7 +555,7 @@ onUnmounted(() => {
 			}
 
 			> .icon + .title {
-				margin-left: 8px;
+				margin-inline-start: 8px;
 			}
 			> .title {
 				transition: opacity 0.2s;
@@ -564,7 +564,7 @@ onUnmounted(() => {
 		> .highlight {
 			position: absolute;
 			bottom: 0;
-			left: 0;
+			inset-inline-start: 0;
 			height: 3px;
 			background: var(--accent);
 			border-radius: 999px;
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 5a8c62453..b2e4a3ef0 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -84,7 +84,7 @@ const target = self ? null : "_blank";
 	}
 
 	> .icon {
-		padding-left: 2px;
+		padding-inline-start: 2px;
 		font-size: 0.9em;
 	}
 
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index f9314cc8c..3e8e60421 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -53,7 +53,7 @@ export default defineComponent({
 	margin: 16px auto;
 
 	& + .hkcxmtwj {
-		margin-left: 16px;
+		margin-inline-start: 16px;
 	}
 }
 </style>
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 3608ce28a..5cc708f65 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -35,6 +35,7 @@ import { set } from "@/scripts/idb-proxy";
 
 import { login, refreshAccount, signout, updateAccount } from "@/account";
 import components from "@/components";
+import { langmap } from "@/scripts/langmap";
 import { lang, ui, version } from "@/config";
 import directives from "@/directives";
 import { i18n } from "@/i18n";
@@ -123,7 +124,8 @@ function checkForSplash() {
 	// #region Set lang attr
 	const html = document.documentElement;
 	html.setAttribute("lang", lang || "en-US");
-	// #endregion
+	html.setAttribute("dir", langmap[lang].rtl ? "rtl" : "ltr");
+	//#endregion
 
 	// #region loginId
 	const params = new URLSearchParams(location.search);
diff --git a/packages/client/src/pages/about-firefish.vue b/packages/client/src/pages/about-firefish.vue
index 6dc931a4c..d52acc3b5 100644
--- a/packages/client/src/pages/about-firefish.vue
+++ b/packages/client/src/pages/about-firefish.vue
@@ -170,7 +170,7 @@
 								:key="sponsor"
 								style="
 									margin-bottom: 0.5rem;
-									margin-right: 0.5rem;
+									margin-inline-end: 0.5rem;
 									font-size: 1.7rem;
 								"
 							>
@@ -192,7 +192,7 @@
 								:key="patron"
 								style="
 									margin-bottom: 0.5rem;
-									margin-right: 0.5rem;
+									margin-inline-end: 0.5rem;
 								"
 							>
 								<Mfm :text="`${patron}`" />
@@ -324,7 +324,7 @@ definePageMetadata({
 		> .emoji {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			visibility: hidden;
 
 			> .emoji {
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index 7b0b62708..873d209e3 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -40,7 +40,10 @@
 						class="fullButton"
 						primary
 						@click.stop="action.handler"
-						><i :class="action.icon" style="margin-right: 6px"></i
+						><i
+							:class="action.icon"
+							style="margin-inline-end: 6px"
+						></i
 						>{{ action.text }}</MkButton
 					>
 					<button
@@ -205,7 +208,7 @@ onUnmounted(() => {
 		margin: 0 var(--margin);
 
 		&.right {
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 
 		&:empty {
@@ -233,7 +236,7 @@ onUnmounted(() => {
 
 		> .fullButton {
 			& + .fullButton {
-				margin-left: 12px;
+				margin-inline-start: 12px;
 			}
 		}
 	}
@@ -244,10 +247,10 @@ onUnmounted(() => {
 		max-width: 400px;
 		overflow: auto;
 		white-space: nowrap;
-		text-align: left;
+		text-align: initial;
 		font-weight: bold;
 		flex-shrink: 0;
-		margin-left: 24px;
+		margin-inline-start: 24px;
 
 		> .avatar {
 			$size: 32px;
@@ -260,7 +263,7 @@ onUnmounted(() => {
 		}
 
 		> .icon {
-			margin-right: 8px;
+			margin-inline-end: 8px;
 			width: 16px;
 			text-align: center;
 		}
@@ -285,7 +288,7 @@ onUnmounted(() => {
 
 					> .chevron {
 						display: inline-block;
-						margin-left: 6px;
+						margin-inline-start: 6px;
 					}
 				}
 			}
@@ -294,7 +297,7 @@ onUnmounted(() => {
 
 	> .tabs {
 		position: relative;
-		margin-left: 16px;
+		margin-inline-start: 16px;
 		font-size: 0.8em;
 		overflow: auto;
 		white-space: nowrap;
@@ -314,7 +317,7 @@ onUnmounted(() => {
 			}
 
 			> .icon + .title {
-				margin-left: 8px;
+				margin-inline-start: 8px;
 			}
 		}
 
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index bc67be360..ff4cbc007 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -463,7 +463,7 @@ definePageMetadata(
 				display: flex;
 				align-items: center;
 				padding: 11px;
-				text-align: left;
+				text-align: initial;
 				border: solid 1px var(--panel);
 
 				&:hover {
@@ -514,7 +514,7 @@ definePageMetadata(
 				display: flex;
 				align-items: center;
 				padding: 12px;
-				text-align: left;
+				text-align: initial;
 
 				&:hover {
 					color: var(--accent);
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 273f035ff..155837cae 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -443,7 +443,7 @@ defineExpose({
 			width: 32%;
 			max-width: 280px;
 			box-sizing: border-box;
-			border-right: solid 0.5px var(--divider);
+			border-inline-end: solid 0.5px var(--divider);
 			overflow: auto;
 			height: 100%;
 		}
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6996b35fa..f33464537 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -106,7 +106,7 @@ onMounted(async () => {
 				> .title {
 					position: absolute;
 					top: 20px;
-					left: 20px;
+					inset-inline-start: 20px;
 					font-size: 90%;
 				}
 
@@ -117,7 +117,7 @@ onMounted(async () => {
 				> .subTitle {
 					position: absolute;
 					bottom: 20px;
-					right: 20px;
+					inset-inline-end: 20px;
 					font-size: 85%;
 				}
 			}
@@ -138,7 +138,7 @@ onMounted(async () => {
 					place-items: center;
 					height: 100%;
 					aspect-ratio: 1;
-					margin-right: 12px;
+					margin-inline-end: 12px;
 					background: var(--accentedBg);
 					color: var(--accent);
 					border-radius: 10px;
diff --git a/packages/client/src/pages/admin/overview.metrics.vue b/packages/client/src/pages/admin/overview.metrics.vue
index c8d7efadf..f1c4f4d2d 100644
--- a/packages/client/src/pages/admin/overview.metrics.vue
+++ b/packages/client/src/pages/admin/overview.metrics.vue
@@ -121,7 +121,7 @@ onUnmounted(() => {
 		> .pie {
 			height: 82px;
 			flex-shrink: 0;
-			margin-right: 16px;
+			margin-inline-end: 16px;
 		}
 
 		> div {
@@ -136,7 +136,7 @@ onUnmounted(() => {
 					margin-bottom: 4px;
 
 					> i {
-						margin-right: 4px;
+						margin-inline-end: 4px;
 					}
 				}
 			}
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index e0e715fdb..01410460c 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -14,7 +14,7 @@
 						<div class="value">
 							<MkNumber
 								:value="stats.originalUsersCount"
-								style="margin-right: 0.5em"
+								style="margin-inline-end: 0.5em"
 							/>
 						</div>
 						<div class="label">{{ i18n.ts.users }}</div>
@@ -28,7 +28,7 @@
 						<div class="value">
 							<MkNumber
 								:value="stats.originalNotesCount"
-								style="margin-right: 0.5em"
+								style="margin-inline-end: 0.5em"
 							/>
 						</div>
 						<div class="label">{{ i18n.ts.notes }}</div>
@@ -42,7 +42,7 @@
 						<div class="value">
 							<MkNumber
 								:value="stats.instances"
-								style="margin-right: 0.5em"
+								style="margin-inline-end: 0.5em"
 							/>
 						</div>
 						<div class="label">{{ i18n.ts.instances }}</div>
@@ -56,7 +56,7 @@
 						<div class="value">
 							<MkNumber
 								:value="onlineUsersCount"
-								style="margin-right: 0.5em"
+								style="margin-inline-end: 0.5em"
 							/>
 						</div>
 						<div class="label">{{ i18n.ts.online }}</div>
@@ -70,7 +70,7 @@
 						<div class="value">
 							<MkNumber
 								:value="emojiCount"
-								style="margin-right: 0.5em"
+								style="margin-inline-end: 0.5em"
 							/>
 						</div>
 						<div class="label">{{ i18n.ts.emojis }}</div>
@@ -141,7 +141,7 @@ onMounted(async () => {
 				place-items: center;
 				height: 100%;
 				aspect-ratio: 1;
-				margin-right: 12px;
+				margin-inline-end: 12px;
 				background: var(--accentedBg);
 				color: var(--accent);
 				border-radius: 10px;
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 8a2208933..d838b1ed5 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -39,7 +39,7 @@ const props = defineProps<{
 		display: block;
 		width: ($bodyTitleHieght + $bodyInfoHieght);
 		height: ($bodyTitleHieght + $bodyInfoHieght);
-		margin-right: 12px;
+		margin-inline-end: 12px;
 	}
 
 	> :global(.body) {
@@ -47,7 +47,7 @@ const props = defineProps<{
 		overflow: hidden;
 		font-size: 0.9em;
 		color: var(--fg);
-		padding-right: 8px;
+		padding-inline-end: 8px;
 
 		> :global(.name) {
 			display: block;
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index 7f3da4d18..6604b42bf 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -42,7 +42,7 @@
 							class="button"
 							inline
 							primary
-							style="margin-right: 12px"
+							style="margin-inline-end: 12px"
 							@click="save(ad)"
 							><i :class="icon('ph-floppy-disk-back')"></i>
 							{{ i18n.ts.save }}</MkButton
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/queue.chart.vue
index ed4702e05..6cf252650 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -47,7 +47,7 @@
 					>
 						{{ job[0] }}
 					</a>
-					<span style="margin-left: 8px; opacity: 0.7"
+					<span style="margin-inline-start: 8px; opacity: 0.7"
 						>({{ number(job[1]) }} jobs)</span
 					>
 				</div>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 6ffd4ae5b..b5a46f4e6 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -118,7 +118,7 @@ definePageMetadata({
 
 		> .icon {
 			width: 1em;
-			margin-right: 0.75em;
+			margin-inline-end: 0.75em;
 
 			&.accepted {
 				color: var(--success);
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 56855a8ea..c69fbd4b9 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -223,10 +223,10 @@ definePageMetadata(
 			margin-bottom: 16px;
 
 			> * {
-				margin-right: 16px;
+				margin-inline-end: 16px;
 
 				&:last-child {
-					margin-right: 0;
+					margin-inline-end: 0;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index f141cc6fa..1730d0cdc 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -43,7 +43,7 @@
 								><I18n
 									:src="i18n.ts._channel.usersCount"
 									tag="span"
-									style="margin-left: 4px"
+									style="margin-inline-start: 4px"
 									><template #n
 										><b>{{
 											channel.usersCount
@@ -56,7 +56,7 @@
 								><I18n
 									:src="i18n.ts._channel.notesCount"
 									tag="span"
-									style="margin-left: 4px"
+									style="margin-inline-start: 4px"
 									><template #n
 										><b>{{
 											channel.notesCount
@@ -165,14 +165,14 @@ definePageMetadata(
 		position: absolute;
 		z-index: 1;
 		top: 16px;
-		left: 16px;
+		inset-inline-start: 16px;
 	}
 
 	> .toggle {
 		position: absolute;
 		z-index: 2;
 		top: 8px;
-		right: 8px;
+		inset-inline-end: 8px;
 		font-size: 1.2em;
 		width: 48px;
 		height: 48px;
@@ -194,7 +194,7 @@ definePageMetadata(
 		> .fade {
 			position: absolute;
 			bottom: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 64px;
 			background: linear-gradient(0deg, var(--panel), var(--X15));
@@ -204,7 +204,7 @@ definePageMetadata(
 			position: absolute;
 			z-index: 1;
 			bottom: 16px;
-			right: 16px;
+			inset-inline-end: 16px;
 			padding: 8px 12px;
 			font-size: 80%;
 			background: rgba(0, 0, 0, 0.7);
@@ -221,7 +221,7 @@ definePageMetadata(
 		position: absolute;
 		z-index: 1;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		-webkit-backdrop-filter: var(--blur, blur(16px));
@@ -236,7 +236,7 @@ definePageMetadata(
 
 		> .toggle {
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 			height: 100%;
 			background: transparent;
 		}
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index c1edd640d..574f8fdf6 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -58,7 +58,7 @@ function menu(ev) {
 	display: flex;
 	align-items: center;
 	padding: 12px;
-	text-align: left;
+	text-align: initial;
 	background: var(--panel);
 	border-radius: 8px;
 
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 9f3a4391d..d7cadbfd6 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -10,7 +10,7 @@
 					<template #header
 						><i
 							:class="icon('ph-bookmark ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.pinnedUsers }}</template
 					>
@@ -24,7 +24,7 @@
 					<template #header
 						><i
 							:class="icon('ph-chart-line-up ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.popularUsers }}</template
 					>
@@ -38,7 +38,7 @@
 					<template #header
 						><i
 							:class="icon('ph-activity ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
 					>
@@ -52,7 +52,7 @@
 					<template #header
 						><i
 							:class="icon('ph-butterfly ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyRegisteredUsers }}</template
 					>
@@ -70,7 +70,7 @@
 				<template #header
 					><i
 						:class="icon('ph-compass ph-fw')"
-						style="margin-right: 0.5em"
+						style="margin-inline-end: 0.5em"
 					></i
 					>{{ i18n.ts.popularTags }}</template
 				>
@@ -96,7 +96,7 @@
 				<template #header
 					><i
 						:class="icon('ph-hash ph-fw')"
-						style="margin-right: 0.5em"
+						style="margin-inline-end: 0.5em"
 					></i
 					>{{ tag }}</template
 				>
@@ -108,7 +108,7 @@
 					<template #header
 						><i
 							:class="icon('ph-chart-line-up ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.popularUsers }}</template
 					>
@@ -118,7 +118,7 @@
 					<template #header
 						><i
 							:class="icon('ph-activity ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyUpdatedUsers }}</template
 					>
@@ -128,7 +128,7 @@
 					<template #header
 						><i
 							:class="icon('ph-rocket-launch ph-fw')"
-							style="margin-right: 0.5em"
+							style="margin-inline-end: 0.5em"
 						></i
 						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
 					>
@@ -253,7 +253,7 @@ os.api("hashtags/list", {
 <style lang="scss" scoped>
 .vxjfqztj {
 	> * {
-		margin-right: 16px;
+		margin-inline-end: 16px;
 
 		&.local {
 			font-weight: bold;
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index a3282a7ea..0f465c5c8 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -176,8 +176,8 @@ definePageMetadata(
 				text-overflow: ellipsis;
 				opacity: 0.7;
 				font-size: 14px;
-				padding-right: 40px;
-				padding-left: 8px;
+				padding-inline-end: 40px;
+				padding-inline-start: 8px;
 				box-sizing: border-box;
 
 				@media (max-width: 500px) {
@@ -189,7 +189,7 @@ definePageMetadata(
 				position: absolute;
 				top: 0;
 				bottom: 0;
-				right: 0;
+				inset-inline-end: 0;
 				margin: auto 0;
 
 				> button {
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 330a12f2a..7f79c7f36 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -181,7 +181,7 @@ definePageMetadata(
 	> .name {
 		position: absolute;
 		top: 8px;
-		left: 9px;
+		inset-inline-start: 9px;
 		padding: 8px;
 		background: var(--panel);
 	}
@@ -189,7 +189,7 @@ definePageMetadata(
 	> .remove {
 		position: absolute;
 		top: 8px;
-		right: 9px;
+		inset-inline-end: 9px;
 		padding: 8px;
 		background: var(--panel);
 	}
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index f34fc5058..25b414db9 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -302,13 +302,13 @@ definePageMetadata(
 					color: #eb6f92;
 
 					::v-deep(.count) {
-						margin-left: 0.5em;
+						margin-inline-start: 0.5em;
 					}
 				}
 			}
 
 			> .other {
-				margin-left: auto;
+				margin-inline-start: auto;
 
 				> button {
 					padding: 8px;
@@ -339,7 +339,7 @@ definePageMetadata(
 			}
 
 			> .koudoku {
-				margin-left: auto;
+				margin-inline-start: auto;
 			}
 		}
 	}
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 21f132c1f..da5fff785 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -358,7 +358,7 @@ defineExpose({
 			> .remove {
 				display: none;
 				position: absolute;
-				right: -6px;
+				inset-inline-end: -6px;
 				top: -6px;
 				margin: 0;
 				padding: 0;
@@ -394,7 +394,7 @@ defineExpose({
 		}
 
 		> .send {
-			margin-left: auto;
+			margin-inline-start: auto;
 			color: var(--accent);
 
 			&:hover {
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index f1ce1baf7..d52b84761 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -156,7 +156,7 @@ function del(): void {
 				position: absolute;
 				z-index: 1;
 				top: -4px;
-				right: -4px;
+				inset-inline-end: -4px;
 				margin: 0;
 				padding: 0;
 				cursor: pointer;
@@ -250,17 +250,17 @@ function del(): void {
 			}
 
 			> i {
-				margin-left: 4px;
+				margin-inline-start: 4px;
 			}
 		}
 	}
 
 	&:not(.isMe) {
-		padding-left: var(--margin);
+		padding-inline-start: var(--margin);
 
 		> .content {
-			padding-left: 16px;
-			padding-right: 32px;
+			padding-inline-start: 16px;
+			padding-inline-end: 32px;
 
 			> .balloon {
 				$color: var(--X4);
@@ -271,11 +271,11 @@ function del(): void {
 				}
 
 				&:not(.noText):before {
-					left: -14px;
+					inset-inline-start: -14px;
 					border-top: solid 8px transparent;
-					border-right: solid 8px $color;
+					border-inline-end: solid 8px $color;
 					border-bottom: solid 8px transparent;
-					border-left: solid 8px transparent;
+					border-inline-start: solid 8px transparent;
 				}
 
 				> .content {
@@ -286,24 +286,26 @@ function del(): void {
 			}
 
 			> footer {
-				text-align: left;
+				text-align: initial;
 			}
 		}
 	}
 
 	&.isMe {
 		flex-direction: row-reverse;
-		padding-right: var(--margin);
-		right: var(--margin); // 削除時にposition: absoluteになったときに使う
+		padding-inline-end: var(--margin);
+		inset-inline-end: var(
+			--margin
+		); // 削除時にposition: absoluteになったときに使う
 
 		> .content {
-			padding-right: 16px;
-			padding-left: 32px;
+			padding-inline-end: 16px;
+			padding-inline-start: 32px;
 			text-align: right;
 
 			> .balloon {
 				background: $me-balloon-color;
-				text-align: left;
+				text-align: initial;
 
 				::selection {
 					color: var(--accent);
@@ -315,12 +317,12 @@ function del(): void {
 				}
 
 				&:not(.noText):before {
-					right: -14px;
-					left: auto;
+					inset-inline-end: -14px;
+					inset-inline-start: auto;
 					border-top: solid 8px transparent;
-					border-right: solid 8px transparent;
+					border-inline-end: solid 8px transparent;
 					border-bottom: solid 8px transparent;
-					border-left: solid 8px $me-balloon-color;
+					border-inline-start: solid 8px $me-balloon-color;
 				}
 
 				> .content {
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 1747147e8..b3b20da4c 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -400,7 +400,7 @@ XMessage:last-of-type {
 			}
 
 			> i {
-				margin-right: 4px;
+				margin-inline-end: 4px;
 			}
 		}
 
@@ -436,7 +436,7 @@ XMessage:last-of-type {
 
 				> i {
 					display: inline-block;
-					margin-right: 8px;
+					margin-inline-end: 8px;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 34dd7825b..44df56bca 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -41,7 +41,7 @@
 						>
 							<i
 								:class="icon('ph-shield-warning ph-xl', false)"
-								style="margin-right: 0.5rem"
+								style="margin-inline-end: 0.5rem"
 							></i>
 							{{ i18n.ts._permissions.allPermissions }}
 						</div>
@@ -54,7 +54,7 @@
 						>
 							<i
 								:class="icon(`ph-${getIcon(p)} ph-xl`, false)"
-								style="margin-right: 0.5rem"
+								style="margin-inline-end: 0.5rem"
 							></i>
 							{{ i18n.t(`_permissions.${p}`) }}
 						</div>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index a027e8b42..db819ab8a 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -107,7 +107,7 @@ definePageMetadata({
 		float: left;
 		min-width: 25px;
 		padding: 13px;
-		margin-right: 10px;
+		margin-inline-end: 10px;
 		border: solid 1px var(--divider);
 		border-radius: 6px;
 
@@ -137,7 +137,7 @@ definePageMetadata({
 	.notify-icon {
 		position: relative;
 		top: -1em;
-		left: -0.5em;
+		inset-inline-start: -0.5em;
 
 		&.ph-circle ph-fill {
 			color: var(--indicator);
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index f769fc211..8fb5ed620 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -125,7 +125,7 @@ export default defineComponent({
 			box-shadow: 0 1px rgba(#000, 0.07);
 
 			> i {
-				margin-right: 6px;
+				margin-inline-end: 6px;
 			}
 
 			&:empty {
@@ -137,7 +137,7 @@ export default defineComponent({
 			position: absolute;
 			z-index: 2;
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 
 			> button {
 				padding: 0;
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 4d1608455..625b97531 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -576,7 +576,7 @@ definePageMetadata(
 			box-shadow: 0 1px rgba(#000, 0.07);
 
 			> i {
-				margin-right: 6px;
+				margin-inline-end: 6px;
 			}
 
 			&:empty {
@@ -588,7 +588,7 @@ definePageMetadata(
 			position: absolute;
 			z-index: 2;
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 
 			> button {
 				padding: 0;
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index f776158b6..7e39269af 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -369,7 +369,7 @@ definePageMetadata(
 					width: fit-content;
 					position: relative;
 					top: -10px;
-					left: 1rem;
+					inset-inline-start: 1rem;
 
 					> .menu {
 						vertical-align: bottom;
@@ -381,7 +381,7 @@ definePageMetadata(
 					}
 
 					> .koudoku {
-						margin-left: 4px;
+						margin-inline-start: 4px;
 						vertical-align: bottom;
 					}
 				}
@@ -408,7 +408,7 @@ definePageMetadata(
 					color: #eb6f92;
 
 					::v-deep(.count) {
-						margin-left: 0.5em;
+						margin-inline-start: 0.5em;
 					}
 				}
 			}
@@ -425,7 +425,7 @@ definePageMetadata(
 			}
 
 			> .user {
-				margin-left: auto;
+				margin-inline-start: auto;
 				display: flex;
 				align-items: center;
 
@@ -440,7 +440,7 @@ definePageMetadata(
 				}
 
 				> .koudoku {
-					margin-left: auto;
+					margin-inline-start: auto;
 					margin: 1rem;
 				}
 			}
@@ -452,7 +452,7 @@ definePageMetadata(
 			border-top: solid 0.5px var(--divider);
 
 			> .link {
-				margin-right: 2em;
+				margin-inline-end: 2em;
 			}
 		}
 	}
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 75c2e32f8..b88e18c62 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -7,7 +7,7 @@
 				<template #icon
 					><i
 						:class="icon('ph-shield-check')"
-						style="margin-right: 0.5rem"
+						style="margin-inline-end: 0.5rem"
 					></i
 				></template>
 				<template #label>{{ i18n.ts.totp }}</template>
@@ -18,7 +18,7 @@
 						<MkButton @click="renewTOTP"
 							><i
 								:class="icon('ph-shield-check')"
-								style="margin-right: 0.5rem"
+								style="margin-inline-end: 0.5rem"
 							></i
 							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
 						>
@@ -27,7 +27,7 @@
 					<MkButton v-else @click="unregisterTOTP"
 						><i
 							:class="icon('ph-shield-slash')"
-							style="margin-right: 0.5rem"
+							style="margin-inline-end: 0.5rem"
 						></i
 						>{{ i18n.ts.unregister }}</MkButton
 					>
@@ -42,7 +42,10 @@
 
 			<MkFolder>
 				<template #icon
-					><i :class="icon('ph-key')" style="margin-right: 0.5rem"></i
+					><i
+						:class="icon('ph-key')"
+						style="margin-inline-end: 0.5rem"
+					></i
 				></template>
 				<template #label>{{ i18n.ts.securityKeyAndPasskey }}</template>
 				<div class="_gaps_s">
@@ -67,7 +70,7 @@
 						<MkButton primary @click="addSecurityKey"
 							><i
 								:class="icon('ph-key')"
-								style="margin-right: 0.5rem"
+								style="margin-inline-end: 0.5rem"
 							></i
 							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
 						>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 4dd64e0fe..325fe83a4 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -284,6 +284,6 @@ definePageMetadata({
 
 <style module>
 .button {
-	margin-right: 16px;
+	margin-inline-end: 16px;
 }
 </style>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 47812e534..2ddb434d1 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -344,7 +344,7 @@ definePageMetadata(INFO);
 
 			> .nav {
 				width: 34%;
-				padding-right: 32px;
+				padding-inline-end: 32px;
 				box-sizing: border-box;
 			}
 
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 527b297c3..6afa33ca9 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -37,7 +37,7 @@
 				class="button"
 				:disabled="accountAlias.length >= 10"
 				inline
-				style="margin-right: 8px"
+				style="margin-inline-end: 8px"
 				@click="add"
 				><i :class="icon('ph-plus')"></i> {{ i18n.ts.add }}</FormButton
 			>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index 7410fd221..d56607692 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="_formRoot">
 		<FormSlot>
-			<VueDraggable v-model="items" animation="150" delay="50">
+			<VueDraggable v-model="items" :animation="150" :delay="50">
 				<div
 					v-for="(element, index) in items"
 					:key="index"
@@ -161,7 +161,7 @@ definePageMetadata({
 	> .itemText {
 		position: relative;
 		font-size: 0.9em;
-		margin-left: 1rem;
+		margin-inline-start: 1rem;
 	}
 
 	> .itemRemove {
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8633f97a6..64bd89add 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -16,7 +16,7 @@
 			>
 				<span style="display: flex"
 					><b>{{ plugin.name }}</b
-					><span style="margin-left: auto"
+					><span style="margin-inline-start: auto"
 						>v{{ plugin.version }}</span
 					></span
 				>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 99486adf8..7de6bba94 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -110,7 +110,7 @@
 					<MkButton
 						:disabled="fields.length >= 16"
 						inline
-						style="margin-right: 8px"
+						style="margin-inline-end: 8px"
 						@click="addField"
 						><i :class="icon('ph-plus')"></i>
 						{{ i18n.ts.add }}</MkButton
@@ -323,7 +323,7 @@ definePageMetadata({
 	> .bannerEdit {
 		position: absolute;
 		top: 16px;
-		right: 16px;
+		inset-inline-end: 16px;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 6d7738136..9a64f53b8 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -150,7 +150,7 @@ definePageMetadata({
 
 		> .icon {
 			width: 1em;
-			margin-right: 0.75em;
+			margin-inline-end: 0.75em;
 
 			&.succ {
 				color: var(--success);
@@ -167,11 +167,11 @@ definePageMetadata({
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			margin-right: 12px;
+			margin-inline-end: 12px;
 		}
 
 		> .time {
-			margin-left: auto;
+			margin-inline-start: auto;
 			opacity: 0.7;
 		}
 	}
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index c4c34d7c8..1ac95ca79 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -288,13 +288,13 @@ definePageMetadata({
 
 		> .toggleWrapper {
 			display: inline-block;
-			text-align: left;
+			text-align: initial;
 			padding: 0 100px;
 			vertical-align: bottom;
 
 			input {
 				position: absolute;
-				left: -99em;
+				inset-inline-start: -99em;
 			}
 
 			&:focus-within > .toggle {
@@ -321,12 +321,12 @@ definePageMetadata({
 			}
 
 			> .before {
-				left: -70px;
+				inset-inline-start: -70px;
 				color: var(--accent);
 			}
 
 			> .after {
-				right: -68px;
+				inset-inline-end: -68px;
 				color: var(--fg);
 			}
 		}
@@ -336,7 +336,7 @@ definePageMetadata({
 			position: relative;
 			z-index: 1;
 			top: 3px;
-			left: 3px;
+			inset-inline-start: 3px;
 			width: 50px - 6;
 			height: 50px - 6;
 			background-color: #ffcf96;
@@ -355,21 +355,21 @@ definePageMetadata({
 
 			.crater--1 {
 				top: 18px;
-				left: 10px;
+				inset-inline-start: 10px;
 				width: 4px;
 				height: 4px;
 			}
 
 			.crater--2 {
 				top: 28px;
-				left: 22px;
+				inset-inline-start: 22px;
 				width: 6px;
 				height: 6px;
 			}
 
 			.crater--3 {
 				top: 10px;
-				left: 25px;
+				inset-inline-start: 25px;
 				width: 8px;
 				height: 8px;
 			}
@@ -384,7 +384,7 @@ definePageMetadata({
 
 		.star--1 {
 			top: 10px;
-			left: 35px;
+			inset-inline-start: 35px;
 			z-index: 0;
 			width: 30px;
 			height: 3px;
@@ -392,7 +392,7 @@ definePageMetadata({
 
 		.star--2 {
 			top: 18px;
-			left: 28px;
+			inset-inline-start: 28px;
 			z-index: 1;
 			width: 30px;
 			height: 3px;
@@ -400,7 +400,7 @@ definePageMetadata({
 
 		.star--3 {
 			top: 27px;
-			left: 40px;
+			inset-inline-start: 40px;
 			z-index: 0;
 			width: 30px;
 			height: 3px;
@@ -415,7 +415,7 @@ definePageMetadata({
 
 		.star--4 {
 			top: 16px;
-			left: 11px;
+			inset-inline-start: 11px;
 			z-index: 0;
 			width: 2px;
 			height: 2px;
@@ -424,7 +424,7 @@ definePageMetadata({
 
 		.star--5 {
 			top: 32px;
-			left: 17px;
+			inset-inline-start: 17px;
 			z-index: 0;
 			width: 3px;
 			height: 3px;
@@ -433,7 +433,7 @@ definePageMetadata({
 
 		.star--6 {
 			top: 36px;
-			left: 28px;
+			inset-inline-start: 28px;
 			z-index: 0;
 			width: 2px;
 			height: 2px;
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 474fe51b0..15cd92e4f 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -372,8 +372,8 @@ definePageMetadata({
 				> .preview {
 					position: absolute;
 					top: 0;
-					left: 0;
-					right: 0;
+					inset-inline-start: 0;
+					inset-inline-end: 0;
 					bottom: 0;
 					margin: auto;
 					width: 42px;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 8929c8094..49dadea9f 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -671,7 +671,7 @@ definePageMetadata(
 		display: block;
 		width: 64px;
 		height: 64px;
-		margin-right: 16px;
+		margin-inline-end: 16px;
 	}
 
 	> .body {
@@ -751,7 +751,7 @@ definePageMetadata(
 	}
 
 	> :global(.ip) {
-		margin-left: auto;
+		margin-inline-start: auto;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index a676de94d..e293f54ad 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -179,7 +179,7 @@
 									v-tooltip.noDelay="i18n.ts.isModerator"
 									style="
 										color: var(--badge);
-										margin-left: 0.5rem;
+										margin-inline-start: 0.5rem;
 									"
 									><i :class="icon('ph-gavel')"></i
 								></span>
@@ -525,7 +525,7 @@ onUnmounted(() => {
 					> .fade {
 						position: absolute;
 						bottom: 0;
-						left: 0;
+						inset-inline-start: 0;
 						width: 100%;
 						height: 78px;
 						background: linear-gradient(
@@ -537,7 +537,7 @@ onUnmounted(() => {
 					> .followed {
 						position: absolute;
 						top: 10px;
-						left: 120px;
+						inset-inline-start: 120px;
 						padding: 4px 8px;
 						color: #fff;
 						background: rgba(0, 0, 0, 0.7);
@@ -553,7 +553,7 @@ onUnmounted(() => {
 					> .title {
 						position: absolute;
 						bottom: 0;
-						left: 0;
+						inset-inline-start: 0;
 						width: 100%;
 						padding: 0 0 8px 154px;
 						box-sizing: border-box;
@@ -572,7 +572,7 @@ onUnmounted(() => {
 							> .followed {
 								position: relative;
 								top: -4px;
-								left: 4px;
+								inset-inline-start: 4px;
 								padding: 4px 8px;
 								color: #fff;
 								background: rgba(0, 0, 0, 0.6);
@@ -589,7 +589,7 @@ onUnmounted(() => {
 						> .bottom {
 							> * {
 								display: inline-block;
-								margin-right: 16px;
+								margin-inline-end: 16px;
 								line-height: 20px;
 								opacity: 0.8;
 
@@ -612,7 +612,7 @@ onUnmounted(() => {
 					> .fade {
 						position: absolute;
 						bottom: 0;
-						left: 0;
+						inset-inline-start: 0;
 						width: 100%;
 						height: 78px;
 						background: linear-gradient(
@@ -624,7 +624,7 @@ onUnmounted(() => {
 					> .actions {
 						position: absolute;
 						top: 6px;
-						right: 12px;
+						inset-inline-end: 12px;
 						padding: 8px;
 						border-radius: 24px;
 						display: flex;
@@ -635,7 +635,7 @@ onUnmounted(() => {
 					> .title {
 						position: absolute;
 						bottom: 0;
-						left: 0;
+						inset-inline-start: 0;
 						width: 100%;
 						padding: 0 0 8px 154px;
 						box-sizing: border-box;
@@ -653,7 +653,7 @@ onUnmounted(() => {
 						> .bottom {
 							> * {
 								display: inline-block;
-								margin-right: 16px;
+								margin-inline-end: 16px;
 								line-height: 20px;
 								opacity: 0.8;
 
@@ -686,7 +686,7 @@ onUnmounted(() => {
 						> .followed {
 							position: relative;
 							top: -4px;
-							left: 4px;
+							inset-inline-start: 4px;
 							padding: 4px 8px;
 							color: #fff;
 							background: rgba(0, 0, 0, 0.6);
@@ -703,7 +703,7 @@ onUnmounted(() => {
 					> .followedWindow {
 						position: relative;
 						top: -25px;
-						left: 80px;
+						inset-inline-start: 80px;
 						padding: 4px 8px;
 						color: #fff;
 						background: rgba(0, 0, 0, 0.6);
@@ -714,7 +714,7 @@ onUnmounted(() => {
 					> .bottom {
 						> * {
 							display: inline-block;
-							margin-right: 8px;
+							margin-inline-end: 8px;
 							opacity: 0.8;
 						}
 					}
@@ -724,7 +724,7 @@ onUnmounted(() => {
 					display: block;
 					position: absolute;
 					top: 170px;
-					left: 16px;
+					inset-inline-start: 16px;
 					z-index: 2;
 					width: 120px;
 					height: 120px;
@@ -841,15 +841,15 @@ onUnmounted(() => {
 					padding-bottom: 0;
 					> .bottom {
 						> .username {
-							margin-right: 0;
+							margin-inline-end: 0;
 						}
 					}
 				}
 
 				> .avatar {
 					top: 90px;
-					left: 0;
-					right: 0;
+					inset-inline-start: 0;
+					inset-inline-end: 0;
 					width: 92px;
 					height: 92px;
 					margin: auto;
@@ -906,7 +906,7 @@ onUnmounted(() => {
 		> .sub {
 			max-width: 350px;
 			min-width: 350px;
-			margin-left: var(--margin);
+			margin-inline-start: var(--margin);
 		}
 	}
 }
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index a9859b075..dd3c3e5eb 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer id="photos-container" :max-height="300" :foldable="true">
 		<template #header
-			><i :class="icon('ph-image')" style="margin-right: 0.5em"></i
+			><i :class="icon('ph-image')" style="margin-inline-end: 0.5em"></i
 			>{{ i18n.ts.images }}</template
 		>
 		<div class="ujigsodd">
@@ -115,7 +115,7 @@ onMounted(() => {
 		text-align: center;
 
 		> i {
-			margin-right: 4px;
+			margin-inline-end: 4px;
 		}
 	}
 }
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index bed1ab55c..de43f2a90 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -55,7 +55,7 @@ const pagination = {
 		> .avatar {
 			width: 24px;
 			height: 24px;
-			margin-right: 8px;
+			margin-inline-end: 8px;
 		}
 
 		> .reaction {
@@ -64,7 +64,7 @@ const pagination = {
 		}
 
 		> .createdAt {
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 	}
 }
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 2c409a67f..4cdc10946 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -51,7 +51,7 @@
 							rounded
 							gradate
 							data-cy-signup
-							style="margin-right: 12px"
+							style="margin-inline-end: 12px"
 							@click="signup()"
 							>{{ i18n.ts.signup }}</MkButton
 						>
@@ -65,7 +65,7 @@
 						<MkButton
 							inline
 							rounded
-							style="margin-left: 12px; margin-top: 12px"
+							style="margin-inline-start: 12px; margin-top: 12px"
 							onclick="window.location.href='/explore'"
 							>Explore</MkButton
 						>
@@ -208,7 +208,7 @@ function showMenu(ev) {
 		> .bg {
 			position: absolute;
 			top: 0;
-			right: 0;
+			inset-inline-end: 0;
 			width: 80%; // 100%からshapeの幅を引いている
 			height: 100%;
 		}
@@ -217,7 +217,7 @@ function showMenu(ev) {
 			position: absolute;
 			top: 0;
 			bottom: 0;
-			right: 64px;
+			inset-inline-end: 64px;
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
@@ -245,7 +245,7 @@ function showMenu(ev) {
 		> .shape1 {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: var(--accent);
@@ -254,7 +254,7 @@ function showMenu(ev) {
 		> .shape2 {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: var(--accent);
@@ -265,7 +265,7 @@ function showMenu(ev) {
 		> .misskey {
 			position: absolute;
 			top: 42px;
-			left: 42px;
+			inset-inline-start: 42px;
 			width: 140px;
 
 			@media (max-width: 450px) {
@@ -276,11 +276,11 @@ function showMenu(ev) {
 		> .emojis {
 			position: absolute;
 			bottom: 32px;
-			left: 115px;
+			inset-inline-start: 115px;
 			transform: scale(1.5);
 
 			> * {
-				margin-right: 8px;
+				margin-inline-end: 8px;
 			}
 
 			@media (max-width: 1200px) {
@@ -309,7 +309,7 @@ function showMenu(ev) {
 			> .menu {
 				position: absolute;
 				top: 16px;
-				right: 16px;
+				inset-inline-end: 16px;
 				width: 32px;
 				height: 32px;
 				border-radius: 8px;
@@ -352,8 +352,8 @@ function showMenu(ev) {
 		> .federation {
 			position: absolute;
 			bottom: 16px;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			margin: auto;
 			background: var(--acrylicPanel);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -361,7 +361,7 @@ function showMenu(ev) {
 			border-radius: 999px;
 			overflow: clip;
 			width: 35%;
-			left: 50%;
+			inset-inline-start: 50%;
 			padding: 8px 0;
 
 			@media (max-width: 900px) {
@@ -386,7 +386,7 @@ function showMenu(ev) {
 		display: inline-block;
 		width: 20px;
 		height: 20px;
-		margin-right: 5px;
+		margin-inline-end: 5px;
 		border-radius: 999px;
 	}
 }
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 2758f11c2..fd4982357 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -193,7 +193,7 @@ export default defineComponent({
 		> .bg {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 		}
@@ -202,7 +202,7 @@ export default defineComponent({
 			position: absolute;
 			top: 0;
 			bottom: 0;
-			right: 64px;
+			inset-inline-end: 64px;
 			margin: auto;
 			width: 500px;
 			height: calc(100% - 128px);
@@ -226,7 +226,7 @@ export default defineComponent({
 		> .shape {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: var(--accent);
@@ -236,7 +236,7 @@ export default defineComponent({
 		> .misskey {
 			position: absolute;
 			bottom: 64px;
-			left: 64px;
+			inset-inline-start: 64px;
 			width: 160px;
 		}
 
@@ -293,9 +293,9 @@ export default defineComponent({
 					padding: 16px 0;
 
 					> span:not(:last-child) {
-						padding-right: 1em;
-						margin-right: 1em;
-						border-right: solid 1px rgba(255, 255, 255, 0.5);
+						padding-inline-end: 1em;
+						margin-inline-end: 1em;
+						border-inline-end: solid 1px rgba(255, 255, 255, 0.5);
 					}
 				}
 			}
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index d131bb94e..ff4bb3565 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -210,7 +210,7 @@ export default defineComponent({
 		> .bg {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 		}
@@ -218,7 +218,7 @@ export default defineComponent({
 		> .fade {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: rgba(0, 0, 0, 0.25);
@@ -227,10 +227,10 @@ export default defineComponent({
 		> .emojis {
 			position: absolute;
 			bottom: 32px;
-			left: 35px;
+			inset-inline-start: 35px;
 
 			> * {
-				margin-right: 8px;
+				margin-inline-end: 8px;
 			}
 
 			@media (max-width: 1200px) {
@@ -259,7 +259,7 @@ export default defineComponent({
 				> .bg {
 					position: absolute;
 					top: 0;
-					left: 0;
+					inset-inline-start: 0;
 					width: 100%;
 					height: 128px;
 					background-position: center;
@@ -269,7 +269,7 @@ export default defineComponent({
 					> .fade {
 						position: absolute;
 						bottom: 0;
-						left: 0;
+						inset-inline-start: 0;
 						width: 100%;
 						height: 128px;
 						background: linear-gradient(
@@ -314,9 +314,9 @@ export default defineComponent({
 
 						> div {
 							> span:not(:last-child) {
-								padding-right: 1em;
-								margin-right: 1em;
-								border-right: solid 0.5px var(--divider);
+								padding-inline-end: 1em;
+								margin-inline-end: 1em;
+								border-inline-end: solid 0.5px var(--divider);
 							}
 						}
 
@@ -334,7 +334,7 @@ export default defineComponent({
 					> .menu {
 						position: absolute;
 						top: 16px;
-						right: 16px;
+						inset-inline-end: 16px;
 						width: 32px;
 						height: 32px;
 						border-radius: 8px;
@@ -351,7 +351,7 @@ export default defineComponent({
 				font-size: 0.9em;
 
 				> *:not(:last-child) {
-					margin-right: 1.5em;
+					margin-inline-end: 1.5em;
 				}
 			}
 		}
diff --git a/packages/client/src/scripts/langmap.ts b/packages/client/src/scripts/langmap.ts
index 0831aec0c..1f8a1428d 100644
--- a/packages/client/src/scripts/langmap.ts
+++ b/packages/client/src/scripts/langmap.ts
@@ -20,15 +20,19 @@ export const langmap = {
 	},
 	ar: {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-AR": {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-MA": {
 		nativeName: "العربية",
+		rtl: true,
 	},
 	"ar-SA": {
 		nativeName: "العربية (السعودية)",
+		rtl: true,
 	},
 	"ay-BO": {
 		nativeName: "Aymar aru",
@@ -206,9 +210,11 @@ export const langmap = {
 	},
 	fa: {
 		nativeName: "فارسی",
+		rtl: true,
 	},
 	"fa-IR": {
 		nativeName: "فارسی",
+		rtl: true,
 	},
 	"fb-LT": {
 		nativeName: "Leet Speak",
@@ -275,9 +281,11 @@ export const langmap = {
 	},
 	he: {
 		nativeName: "עברית‏",
+		rtl: true,
 	},
 	"he-IL": {
 		nativeName: "עברית‏",
+		rtl: true,
 	},
 	hi: {
 		nativeName: "हिन्दी",
@@ -485,6 +493,7 @@ export const langmap = {
 	},
 	"ps-AF": {
 		nativeName: "پښتو",
+		rtl: true,
 	},
 	pt: {
 		nativeName: "Português",
@@ -614,9 +623,11 @@ export const langmap = {
 	},
 	ur: {
 		nativeName: "اردو",
+		rtl: true,
 	},
 	"ur-PK": {
 		nativeName: "اردو",
+		rtl: true,
 	},
 	uz: {
 		nativeName: "O'zbek",
@@ -635,9 +646,11 @@ export const langmap = {
 	},
 	yi: {
 		nativeName: "ייִדיש",
+		rtl: true,
 	},
 	"yi-DE": {
 		nativeName: "ייִדיש (German)",
+		rtl: true,
 	},
 	zh: {
 		nativeName: "中文",
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index bc28b4366..f345297fd 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -212,7 +212,7 @@ hr {
 ._modalBg {
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 	background: var(--modalBg);
@@ -389,11 +389,11 @@ hr {
 		margin: 0 !important;
 
 		&:not(:first-child) {
-			margin-left: 8px !important;
+			margin-inline-start: 8px !important;
 		}
 
 		&:not(:last-child) {
-			margin-right: 8px !important;
+			margin-inline-end: 8px !important;
 		}
 	}
 }
@@ -531,8 +531,8 @@ hr {
 			content: "";
 			position: absolute;
 			top: 0;
-			right: 0;
-			left: 0;
+			inset-inline-end: 0;
+			inset-inline-start: 0;
 			bottom: 0;
 			z-index: -1;
 			background: var(--bg);
@@ -582,7 +582,7 @@ hr {
 }
 
 ._beta {
-	margin-left: 0.7em;
+	margin-inline-start: 0.7em;
 	font-size: 65%;
 	padding: 2px 3px;
 	color: var(--accent);
@@ -611,7 +611,7 @@ hr {
 				opacity: 0.7;
 
 				> ._icon {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 					display: none;
 				}
 			}
@@ -648,7 +648,7 @@ hr {
 	// 	content: "";
 	// 	position: absolute;
 	// 	bottom: 0;
-	// 	left: 0;
+	// 	inset-inline-start: 0;
 	// 	width: 0%;
 	// 	border-bottom: 1px solid currentColor;
 	// 	transition: 0.3s ease-in-out;
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index c11b528f2..5fe30402b 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -95,7 +95,7 @@ if ($i) {
 	position: fixed;
 	z-index: 4000000;
 	top: 15px;
-	right: 15px;
+	inset-inline-end: 15px;
 
 	&:before {
 		content: "";
@@ -114,7 +114,7 @@ if ($i) {
 #devTicker {
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	z-index: 2147483647;
 	color: #f6c177;
 	background: #6e6a86;
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index f0f83b8df..54302683f 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -197,7 +197,7 @@ function more() {
 			> .banner {
 				position: absolute;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				width: 100%;
 				height: 100%;
 				background-size: cover;
@@ -244,7 +244,7 @@ function more() {
 				height: 40px;
 				color: var(--fgOnAccent);
 				font-weight: bold;
-				text-align: left;
+				text-align: initial;
 
 				&:before {
 					content: "";
@@ -254,8 +254,8 @@ function more() {
 					margin: auto;
 					position: absolute;
 					top: 0;
-					left: 0;
-					right: 0;
+					inset-inline-start: 0;
+					inset-inline-end: 0;
 					bottom: 0;
 					border-radius: 999px;
 					background: linear-gradient(
@@ -274,8 +274,8 @@ function more() {
 
 				> .icon {
 					position: relative;
-					margin-left: 30px;
-					margin-right: 8px;
+					margin-inline-start: 30px;
+					margin-inline-end: 8px;
 					width: 32px;
 				}
 
@@ -303,12 +303,12 @@ function more() {
 				position: relative;
 				display: flex;
 				align-items: center;
-				padding-left: 30px;
+				padding-inline-start: 30px;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				white-space: nowrap;
 				width: 100%;
-				text-align: left;
+				text-align: initial;
 				box-sizing: border-box;
 				margin-top: 16px;
 
@@ -317,7 +317,7 @@ function more() {
 					width: 32px;
 					aspect-ratio: 1;
 					transform: translateX(-100%);
-					left: 50%;
+					inset-inline-start: 50%;
 				}
 			}
 		}
@@ -333,26 +333,26 @@ function more() {
 			> .item {
 				position: relative;
 				display: block;
-				padding-left: 24px;
+				padding-inline-start: 24px;
 				line-height: 2.85rem;
 				text-overflow: ellipsis;
 				overflow: hidden;
 				white-space: nowrap;
 				width: 100%;
-				text-align: left;
+				text-align: initial;
 				box-sizing: border-box;
 				color: var(--navFg);
 
 				> .icon {
 					position: relative;
 					width: 32px;
-					margin-right: 8px;
+					margin-inline-end: 8px;
 				}
 
 				> .indicator {
 					position: absolute;
 					top: 0;
-					left: 20px;
+					inset-inline-start: 20px;
 					color: var(--navIndicator);
 					font-size: 8px;
 				}
@@ -385,8 +385,8 @@ function more() {
 						margin: auto;
 						position: absolute;
 						top: 0;
-						left: 0;
-						right: 0;
+						inset-inline-start: 0;
+						inset-inline-end: 0;
 						bottom: 0;
 						border-radius: 999px;
 						background: var(--accentedBg);
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index d0bab518a..05298b8bf 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -268,7 +268,7 @@ function more(ev: MouseEvent) {
 			background: var(--navBg);
 		}
 		#firefish_app > .wallpaper:not(.centered) & {
-			border-right: 1px solid var(--divider);
+			border-inline-end: 1px solid var(--divider);
 		}
 		contain: strict;
 		display: flex;
@@ -277,8 +277,8 @@ function more(ev: MouseEvent) {
 
 	&:not(.iconOnly) {
 		> .body {
-			margin-left: -200px;
-			padding-left: 200px;
+			margin-inline-start: -200px;
+			padding-inline-start: 200px;
 			box-sizing: content-box;
 			width: $nav-width;
 
@@ -289,7 +289,7 @@ function more(ev: MouseEvent) {
 				> .banner {
 					position: absolute;
 					top: 0;
-					left: 0;
+					inset-inline-start: 0;
 					width: 100%;
 					height: 100%;
 					background-size: cover;
@@ -362,7 +362,7 @@ function more(ev: MouseEvent) {
 					}
 
 					> .text {
-						margin-left: 1rem;
+						margin-inline-start: 1rem;
 					}
 				}
 
@@ -420,7 +420,7 @@ function more(ev: MouseEvent) {
 					> .icon {
 						position: relative;
 						width: 32px;
-						margin-right: 8px;
+						margin-inline-end: 8px;
 					}
 
 					> .indicator {
@@ -609,7 +609,7 @@ function more(ev: MouseEvent) {
 					> .indicator {
 						position: absolute;
 						top: 6px;
-						left: 24px;
+						inset-inline-start: 24px;
 						color: var(--navIndicator);
 						font-size: 8px;
 						animation: blink 1s infinite;
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index f33561b19..a6fdb60c3 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -107,14 +107,14 @@ function getInstanceIcon(instance): string {
 	::v-deep(.item) {
 		display: inline-block;
 		vertical-align: bottom;
-		margin-right: 5em;
+		margin-inline-end: 5em;
 
 		> .icon {
 			display: inline-block;
 			height: var(--height);
 			aspect-ratio: 1;
 			vertical-align: bottom;
-			margin-right: 1em;
+			margin-inline-end: 1em;
 		}
 
 		> .host {
@@ -122,7 +122,7 @@ function getInstanceIcon(instance): string {
 		}
 
 		&.colored {
-			padding-right: 1em;
+			padding-inline-end: 1em;
 			color: #fff;
 		}
 	}
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 53dea3c2f..60630d447 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -105,7 +105,7 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 			height: var(--height);
 			aspect-ratio: 1;
 			vertical-align: bottom;
-			margin-right: 8px;
+			margin-inline-end: 8px;
 		}
 
 		> .text {
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 04b29e1af..cc444f5bf 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
 	position: fixed;
 	z-index: 16385;
 	bottom: 8px;
-	right: 8px;
+	inset-inline-end: 8px;
 	margin: 0;
 	padding: 6px 12px;
 	font-size: 0.9em;
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index b7ecc0388..674ae27cb 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -67,7 +67,7 @@ const zIndex = os.claimZIndex("high");
 <style lang="scss" scoped>
 .mk-uploader {
 	position: fixed;
-	right: 16px;
+	inset-inline-end: 16px;
 	width: 260px;
 	top: 32px;
 	padding: 16px 20px;
@@ -125,7 +125,7 @@ const zIndex = os.claimZIndex("high");
 	flex-shrink: 1;
 }
 .mk-uploader > ol > li > .top > .name > i {
-	margin-right: 4px;
+	margin-inline-end: 4px;
 }
 .mk-uploader > ol > li > .top > .status {
 	display: block;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 21901916a..9d54d6821 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -440,20 +440,21 @@ async function deleteProfile() {
 
 			&.center {
 				> .column:first-of-type {
-					margin-left: auto;
+					margin-inline-start: auto;
 				}
 
 				> .column:last-of-type {
-					margin-right: auto;
+					margin-inline-end: auto;
 				}
 			}
 
 			> .column {
 				flex-shrink: 0;
-				border-right: solid var(--deckDividerThickness) var(--bg);
+				border-inline-end: solid var(--deckDividerThickness) var(--bg);
 
 				&:first-of-type {
-					border-left: solid var(--deckDividerThickness) var(--bg);
+					border-inline-start: solid var(--deckDividerThickness)
+						var(--bg);
 				}
 
 				&.folder {
@@ -480,8 +481,8 @@ async function deleteProfile() {
 
 			> .sideMenu {
 				flex-shrink: 0;
-				margin-right: 0;
-				margin-left: auto;
+				margin-inline-end: 0;
+				margin-inline-start: auto;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
@@ -528,7 +529,7 @@ async function deleteProfile() {
 		position: fixed;
 		z-index: 1000;
 		bottom: 0;
-		left: 0;
+		inset-inline-start: 0;
 		padding: 16px;
 		display: flex;
 		width: 100%;
@@ -545,14 +546,14 @@ async function deleteProfile() {
 			color: var(--fg);
 
 			&:not(:last-child) {
-				margin-right: 12px;
+				margin-inline-end: 12px;
 			}
 
 			@media (max-width: 400px) {
 				height: 60px;
 
 				&:not(:last-child) {
-					margin-right: 8px;
+					margin-inline-end: 8px;
 				}
 			}
 
@@ -563,7 +564,7 @@ async function deleteProfile() {
 			> .indicator {
 				position: absolute;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				color: var(--indicator);
 				font-size: 16px;
 			}
@@ -573,11 +574,11 @@ async function deleteProfile() {
 			}
 
 			&:first-child {
-				margin-left: 0;
+				margin-inline-start: 0;
 			}
 
 			&:last-child {
-				margin-right: 0;
+				margin-inline-end: 0;
 			}
 
 			> * {
@@ -601,7 +602,7 @@ async function deleteProfile() {
 	> .menu {
 		position: fixed;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		z-index: 1001;
 		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 		height: calc(var(--vh, 1vh) * 100);
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index 6a39cfcce..600e78617 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -7,7 +7,7 @@
 	>
 		<template #header>
 			<i :class="icon('ph-flying-saucer')"></i
-			><span style="margin-left: 8px">{{ column.name }}</span>
+			><span style="margin-inline-start: 8px">{{ column.name }}</span>
 		</template>
 
 		<XTimeline
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index af11c3600..d7c9ac530 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -7,7 +7,7 @@
 	>
 		<template #header>
 			<i :class="icon('ph-television')"></i
-			><span style="margin-left: 8px">{{ column.name }}</span>
+			><span style="margin-inline-start: 8px">{{ column.name }}</span>
 		</template>
 
 		<XTimeline
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index ac99d6b8b..e2a2d8d9d 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -334,7 +334,7 @@ function onDrop(ev) {
 			position: absolute;
 			z-index: 1000;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: var(--focus);
@@ -348,7 +348,7 @@ function onDrop(ev) {
 			position: absolute;
 			z-index: 1000;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background: var(--focus);
@@ -443,7 +443,7 @@ function onDrop(ev) {
 
 		> .toggleActive,
 		> .action {
-			margin-left: -16px;
+			margin-inline-start: -16px;
 		}
 
 		> .action {
@@ -455,8 +455,8 @@ function onDrop(ev) {
 		}
 
 		> .menu {
-			margin-left: auto;
-			margin-right: -16px;
+			margin-inline-start: auto;
+			margin-inline-end: -16px;
 		}
 	}
 
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 33d0389ca..b3c46f26a 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -7,7 +7,7 @@
 		<template #header
 			><i
 				:class="icon('ph-envelope-simple-open')"
-				style="margin-right: 8px"
+				style="margin-inline-end: 8px"
 			></i
 			>{{ column.name }}</template
 		>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 761c62aba..60c2229e2 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -7,7 +7,7 @@
 	>
 		<template #header>
 			<i :class="icon('ph-list-bullets')"></i
-			><span style="margin-left: 8px">{{ column.name }}</span>
+			><span style="margin-inline-start: 8px">{{ column.name }}</span>
 		</template>
 
 		<XTimeline
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index d2a498240..7ed8d4c9c 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -5,7 +5,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i :class="icon('ph-at')" style="margin-right: 8px"></i
+			><i :class="icon('ph-at')" style="margin-inline-end: 8px"></i
 			>{{ column.name }}</template
 		>
 
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 2fdece9e4..fc1792c98 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -6,7 +6,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i :class="icon('ph-bell')" style="margin-right: 8px"></i
+			><i :class="icon('ph-bell')" style="margin-inline-end: 8px"></i
 			>{{ column.name }}</template
 		>
 
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 9c7b4404d..6465ff055 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -21,7 +21,7 @@
 				v-else-if="column.tl === 'global'"
 				:class="icon('ph-planet')"
 			></i>
-			<span style="margin-left: 8px">{{ column.name }}</span>
+			<span style="margin-inline-start: 8px">{{ column.name }}</span>
 		</template>
 
 		<div v-if="disabled" class="iwaalbte">
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 45534dce1..41435c0cd 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -7,7 +7,7 @@
 		@parent-focus="($event) => emit('parent-focus', $event)"
 	>
 		<template #header
-			><i :class="icon('ph-browser')" style="margin-right: 8px"></i
+			><i :class="icon('ph-browser')" style="margin-inline-end: 8px"></i
 			>{{ column.name }}</template
 		>
 		<div class="wtdtxvec">
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 01e50e7fe..1bdd12859 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -539,7 +539,7 @@ console.log(mainRouter.currentRoute.value.name);
 	}
 	&:not(.isMobile) {
 		> .contents {
-			border-right: 0.5px solid var(--divider);
+			border-inline-end: 0.5px solid var(--divider);
 		}
 	}
 	&.wallpaper {
@@ -573,8 +573,8 @@ console.log(mainRouter.currentRoute.value.name);
 		}
 
 		> :deep(.sidebar:not(.iconOnly)) {
-			margin-left: -200px;
-			padding-left: 200px;
+			margin-inline-start: -200px;
+			padding-inline-start: 200px;
 			box-sizing: content-box;
 			.banner {
 				pointer-events: none;
@@ -618,7 +618,7 @@ console.log(mainRouter.currentRoute.value.name);
 					hsla(0, 0%, 0%, 0) 100%
 				) !important;
 				width: 125% !important;
-				left: -12.5% !important;
+				inset-inline-start: -12.5% !important;
 				height: 145% !important;
 			}
 		}
@@ -677,7 +677,7 @@ console.log(mainRouter.currentRoute.value.name);
 	> .widgetsDrawer {
 		position: fixed;
 		top: 0;
-		right: 0;
+		inset-inline-end: 0;
 		z-index: 1001;
 		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 		height: calc(var(--vh, 1vh) * 100);
@@ -691,7 +691,7 @@ console.log(mainRouter.currentRoute.value.name);
 	> .postButton,
 	.widgetButton {
 		bottom: var(--stickyBottom);
-		right: 1.5rem;
+		inset-inline-end: 1.5rem;
 		height: 4rem;
 		width: 4rem;
 		background-position: center;
@@ -724,7 +724,7 @@ console.log(mainRouter.currentRoute.value.name);
 		position: fixed;
 		z-index: 1000;
 		bottom: 0;
-		left: 0;
+		inset-inline-start: 0;
 		padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
 		display: flex;
 		width: 100%;
@@ -763,7 +763,7 @@ console.log(mainRouter.currentRoute.value.name);
 				> .indicator {
 					position: absolute;
 					top: 0;
-					left: 0;
+					inset-inline-start: 0;
 					color: var(--indicator);
 					font-size: 16px;
 				}
@@ -774,20 +774,20 @@ console.log(mainRouter.currentRoute.value.name);
 			}
 
 			&:not(:last-child) {
-				margin-right: 12px;
+				margin-inline-end: 12px;
 			}
 
 			@media (max-width: 400px) {
 				height: 60px;
 
 				&:not(:last-child) {
-					margin-right: 8px;
+					margin-inline-end: 8px;
 				}
 			}
 			> .indicator {
 				position: absolute;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				color: var(--indicator);
 				font-size: 16px;
 			}
@@ -797,11 +797,11 @@ console.log(mainRouter.currentRoute.value.name);
 			}
 
 			&:first-child {
-				margin-left: 0;
+				margin-inline-start: 0;
 			}
 
 			&:last-child {
-				margin-right: 0;
+				margin-inline-end: 0;
 			}
 
 			> * {
@@ -825,7 +825,7 @@ console.log(mainRouter.currentRoute.value.name);
 	> .menuDrawer {
 		position: fixed;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		z-index: 1001;
 		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 		height: calc(var(--vh, 1vh) * 100);
@@ -843,6 +843,6 @@ console.log(mainRouter.currentRoute.value.name);
 .statusbars {
 	position: sticky;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 }
 </style>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 6006e407d..1688b9be6 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -230,7 +230,7 @@ export default defineComponent({
 					}
 
 					&:first-child {
-						margin-right: 16px;
+						margin-inline-end: 16px;
 					}
 				}
 			}
@@ -278,7 +278,7 @@ export default defineComponent({
 			> .header {
 				position: sticky;
 				top: 0;
-				left: 0;
+				inset-inline-start: 0;
 				z-index: 1000;
 			}
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 4e7fbf2f7..05b5a740b 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -216,7 +216,7 @@ defineExpose({
 		> .kanban {
 			position: fixed;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 500px;
 			height: 100vh;
 			overflow: auto;
@@ -253,7 +253,7 @@ defineExpose({
 		position: fixed;
 		z-index: 1001;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100vw;
 		height: 100vh;
 	}
@@ -262,7 +262,7 @@ defineExpose({
 		position: fixed;
 		z-index: 1001;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 240px;
 		height: 100vh;
 		background: var(--panel);
@@ -272,7 +272,7 @@ defineExpose({
 			padding: 16px;
 
 			> .icon {
-				margin-right: 1em;
+				margin-inline-end: 1em;
 			}
 		}
 
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 5458efb65..f1ea238cf 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -171,7 +171,7 @@ export default defineComponent({
 	$height: 60px;
 	position: sticky;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	z-index: 1000;
 	line-height: $height;
 	-webkit-backdrop-filter: var(--blur, blur(32px));
@@ -194,7 +194,7 @@ export default defineComponent({
 				border-bottom: solid $line transparent;
 
 				> .icon {
-					margin-right: 0.5em;
+					margin-inline-end: 0.5em;
 				}
 
 				&.page {
@@ -212,7 +212,7 @@ export default defineComponent({
 					position: relative;
 
 					> .icon + .text {
-						margin-left: 8px;
+						margin-inline-start: 8px;
 					}
 
 					> .avatar {
@@ -221,7 +221,7 @@ export default defineComponent({
 						width: $size;
 						height: $size;
 						vertical-align: middle;
-						margin-right: 8px;
+						margin-inline-end: 8px;
 						pointer-events: none;
 					}
 
@@ -243,15 +243,15 @@ export default defineComponent({
 			}
 
 			> .right {
-				margin-left: auto;
+				margin-inline-start: auto;
 
 				> .search {
 					background: var(--bg);
 					border-radius: 999px;
 					width: 230px;
 					line-height: $height - 20px;
-					margin-right: 16px;
-					text-align: left;
+					margin-inline-end: 16px;
+					text-align: initial;
 
 					> * {
 						opacity: 0.7;
@@ -294,7 +294,7 @@ export default defineComponent({
 			text-align: center;
 
 			> .icon + .text {
-				margin-left: 8px;
+				margin-inline-start: 8px;
 			}
 
 			> .avatar {
@@ -303,7 +303,7 @@ export default defineComponent({
 				width: $size;
 				height: $size;
 				vertical-align: middle;
-				margin-right: 8px;
+				margin-inline-end: 8px;
 				pointer-events: none;
 			}
 		}
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index c92dc9fde..ccccbc6dd 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -172,7 +172,7 @@ export default defineComponent({
 	> .back {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		width: 100%;
 		height: 100%;
 		background: rgba(0, 0, 0, 0.3);
@@ -263,7 +263,7 @@ export default defineComponent({
 
 			> .announcements {
 				margin: 32px 0;
-				text-align: left;
+				text-align: initial;
 
 				> header {
 					padding: 12px 16px;
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index a00f143d8..5bbcc693f 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -188,7 +188,7 @@ defineExpose<WidgetComponentExpose>({
 
 	> .logs {
 		border-top: solid 0.5px var(--divider);
-		text-align: left;
+		text-align: initial;
 		padding: 16px;
 
 		&:empty {
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index b37970eb3..64565ed95 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -203,7 +203,7 @@ defineExpose<WidgetComponentExpose>({
 				opacity: 0.8;
 
 				> b {
-					margin-left: 2px;
+					margin-inline-start: 2px;
 				}
 			}
 
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index 6cdd520d9..8a5e7b8f5 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -246,22 +246,22 @@ defineExpose<WidgetComponentExpose>({
 
 		&.a {
 			top: 14px;
-			left: 14px;
+			inset-inline-start: 14px;
 		}
 
 		&.b {
 			top: 14px;
-			right: 14px;
+			inset-inline-end: 14px;
 		}
 
 		&.c {
 			bottom: 14px;
-			left: 14px;
+			inset-inline-start: 14px;
 		}
 
 		&.d {
 			bottom: 14px;
-			right: 14px;
+			inset-inline-end: 14px;
 		}
 	}
 
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 79b5469cd..3224a7207 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -141,7 +141,7 @@ defineExpose<WidgetComponentExpose>({
 				height: ($bodyTitleHieght + $bodyInfoHieght);
 				object-fit: cover;
 				border-radius: 4px;
-				margin-right: 8px;
+				margin-inline-end: 8px;
 			}
 
 			> .body {
@@ -149,7 +149,7 @@ defineExpose<WidgetComponentExpose>({
 				overflow: hidden;
 				font-size: 0.9em;
 				color: var(--fg);
-				padding-right: 8px;
+				padding-inline-end: 8px;
 
 				> .a {
 					display: block;
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 8e5cb860f..bfce4755d 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -254,7 +254,7 @@ defineExpose<WidgetComponentExpose>({
 
 			> .icon {
 				color: var(--warn);
-				margin-left: auto;
+				margin-inline-start: auto;
 				animation: warnBlink 1s infinite;
 			}
 		}
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 7159b924a..416e49340 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -113,7 +113,7 @@ defineExpose<WidgetComponentExpose>({
 		display: block;
 		position: absolute;
 		bottom: 8px;
-		right: 8px;
+		inset-inline-end: 8px;
 		margin: 0;
 		padding: 0 10px;
 		height: 28px;
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index df03b8135..b9fede1d2 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -179,11 +179,11 @@ function onStatsLog(statsLog) {
 		width: 50%;
 
 		&:first-child {
-			padding-right: 5px;
+			padding-inline-end: 5px;
 		}
 
 		&:last-child {
-			padding-left: 5px;
+			padding-inline-start: 5px;
 		}
 
 		> text {
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index 4a18098fb..3997d6294 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -42,7 +42,7 @@ onBeforeUnmount(() => {
 	> .pie {
 		height: 82px;
 		flex-shrink: 0;
-		margin-right: 16px;
+		margin-inline-end: 16px;
 	}
 
 	> div {
@@ -57,7 +57,7 @@ onBeforeUnmount(() => {
 				margin-bottom: 4px;
 
 				> i {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 				}
 			}
 		}
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index 71ebd1732..b2fef6ea2 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -35,7 +35,7 @@ const available = computed(() => props.meta.fs.total - props.meta.fs.used);
 	> .pie {
 		height: 82px;
 		flex-shrink: 0;
-		margin-right: 16px;
+		margin-inline-end: 16px;
 	}
 
 	> div {
@@ -50,7 +50,7 @@ const available = computed(() => props.meta.fs.total - props.meta.fs.used);
 				margin-bottom: 4px;
 
 				> i {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 				}
 			}
 		}
diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index ea9d1120a..44d8c110b 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -62,7 +62,7 @@ onBeforeUnmount(() => {
 	> .pie {
 		height: 82px;
 		flex-shrink: 0;
-		margin-right: 16px;
+		margin-inline-end: 16px;
 	}
 
 	> div {
@@ -77,7 +77,7 @@ onBeforeUnmount(() => {
 				margin-bottom: 4px;
 
 				> i {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 				}
 			}
 		}
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index b5ea5fd16..481bf18bf 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -50,7 +50,7 @@ onBeforeUnmount(() => {
 	> .pie {
 		height: 82px;
 		flex-shrink: 0;
-		margin-right: 16px;
+		margin-inline-end: 16px;
 	}
 
 	> div {
@@ -65,7 +65,7 @@ onBeforeUnmount(() => {
 				margin-bottom: 4px;
 
 				> i {
-					margin-right: 4px;
+					margin-inline-end: 4px;
 				}
 			}
 		}
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index 592604c5a..633ac5e81 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -138,11 +138,11 @@ function onStatsLog(statsLog) {
 		width: 50%;
 
 		&:first-child {
-			padding-right: 5px;
+			padding-inline-end: 5px;
 		}
 
 		&:last-child {
-			padding-left: 5px;
+			padding-inline-start: 5px;
 		}
 
 		> text {
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index 6a7ec6c59..e47e75f81 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -152,7 +152,7 @@ defineExpose<WidgetComponentExpose>({
 		> .slide {
 			position: absolute;
 			top: 0;
-			left: 0;
+			inset-inline-start: 0;
 			width: 100%;
 			height: 100%;
 			background-size: cover;
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index a51ff32c9..c429a4603 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -31,7 +31,7 @@
 					v-else-if="widgetProps.src === 'antenna'"
 					:class="icon('ph-television')"
 				></i>
-				<span style="margin-left: 8px">{{
+				<span style="margin-inline-start: 8px">{{
 					widgetProps.src === "list"
 						? widgetProps.list.name
 						: widgetProps.src === "antenna"
@@ -46,7 +46,7 @@
 								: 'ph-caret-down ph-lg',
 						)
 					"
-					style="margin-left: 8px"
+					style="margin-inline-start: 8px"
 				></i>
 			</button>
 		</template>