rtlオプションの表示改善

rynan4818 · Sep 21, 2020 · a88cd19 · a88cd19
1 parent 75d6e00
commit a88cd19
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ file:///C:/TOOL/beat-saber-overlay-bsr_no-performance_add/index.html?modifiers=t
 - `top`
 	* オーバーレイの表示を上部に配置し、レイアウトを垂直方向に反転します。
 - `rtl`
-	* オーバーレイを右に移動し、右揃えのレイアウトにします。
+	* オーバーレイを右に移動し、右揃えのレイアウトにします。	`!`と`.`の表示に問題があります。（下記参照)
 - `scale`
 	* 1080p(1920x1080)の画面で使用するために、オーバーレイを1.5倍にスケーリングします。
 - `test`
@@ -54,6 +54,20 @@ file:///C:/TOOL/beat-saber-overlay-bsr_no-performance_add/index.html?modifiers=t
 - `no-performance`
 	* スコア表示を消します。　 （今回追加）
 
+### `rtl`の表示修正
+
+上記`rtl`オプションを使用すると、下記画像の様に`!`や`.`の表示位置がおかしくなる問題があります。
+
+![image](https://github.com/rynan4818/rynan4818.github.io/blob/master/beatsaber-overlay-rtl2.png?raw=true)
+
+この問題を修正するため、`rtl`オプションの代わりに、`index_rtl.html`を追加しました。
+`index.html`の代わりに`index_rtl.html`に変更して使用してください。
+デフォルトで右側表示になります。`rtl`オプション以外はそのまま使用可能です。
+
+```
+file:///C:/TOOL/beat-saber-overlay-bsr_no-performance_add/index_rtl.html?modifiers=top,bsr
+```
+
 ### bsrの表示位置や文字サイズを変更したい場合
 
 表示位置を変更したい場合は`index.html`の以下の部分を修正して下さい。

diff --git a/index_rtl.html b/index_rtl.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Overlay</title>
+		<link rel="stylesheet" href="style.css">
+		<link rel="stylesheet" href="rtl2.css">
+		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800" rel="stylesheet"> 
+	</head>
+
+	<body>
+		<div id="overlay" class="hidden">
+			<div id="performance">
+				<div class="performance-group">
+					<span class="subtext" id="percentage">0%</span>
+					<span class="text" id="rank">E</span>
+				</div>
+
+				<div class="performance-group">
+					<span class="subtext" id="combo_text">Combo</span>
+					<span class="text" id="combo">0</span>
+				</div>
+
+				<span id="score">0</span>
+			</div>
+
+			<div id="beatmap">
+				<div id="meta">
+					<div id="text">
+						<div id="titles">
+							<span id="subtitle">Subtitle</span>
+							<span id="title">Title</span>
+						</div>
+
+						<span id="artist">Artist</span>
+					</div>
+					<div>
+						<span id="bsr">bsr 0000</span>
+					</div>
+					<div>
+						<span id="njs">0 NJS</span>
+						<span id="bpm">0 BPM</span>
+						<span id="difficulty">Easy</span>
+					</div>
+				</div>
+				<div id="cover">
+					<img id="image">
+
+					<svg width="90" height="90">
+						<rect width="90" height="90" id="darken"></rect>
+						<circle cx="45" cy="45" r="30" id="remaining"></circle>
+						<circle cx="45" cy="45" r="30" id="progress"></circle>
+					</svg>
+
+					<div>
+						<span id="progress-text">0:00</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<script src="./js/options.js"></script>
+
+		<script src="./js/ui.js"></script>
+		<script src="./js/events.js"></script>
+		<script src="./js/manager.js"></script>
+	</body>
+</html>
diff --git a/rtl2.css b/rtl2.css
@@ -0,0 +1,17 @@
+#overlay {
+	direction: ltr;
+	right: 40px;
+    text-align: right;
+}
+
+#titles {
+	display: block;
+}
+
+#njs {
+	direction: rtl;
+}
+
+#score {
+	transform: translate(2px, 0);
+}