From 2559ac8d5b2cc7d001fcff8df3ae05d2826664cd Mon Sep 17 00:00:00 2001
From: "Wei-Cheng Yeh (IID)" <iid@ccns.ncku.edu.tw>
Date: Wed, 20 Mar 2024 17:39:34 +0800
Subject: [PATCH] refactor(Rune): drop halves-group container for two-color
 chars

See robertabcd/PttChrome#102 for references.

* src/components/cells/Rune.tsx
    * drop the use of CSS class .halves-group
    * use react.Fragment (`<> </>`) to replace the previous outer `<span>`
    * make classNamesGroup (for styling the previous outer `<span>`)
      appended to classNames0 (for styling each two-color char)
* src/components/cells/ContentRenderer.module.css
    * drop CSS class .halves-group
    * replace .halves styling with .o styling from the PttChrome PR
---
 .../cells/ContentRenderer.module.css          | 28 ++++++++-----------
 src/components/cells/Rune.tsx                 | 11 +++-----
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/components/cells/ContentRenderer.module.css b/src/components/cells/ContentRenderer.module.css
index b3bcdae..5e4cee6 100644
--- a/src/components/cells/ContentRenderer.module.css
+++ b/src/components/cells/ContentRenderer.module.css
@@ -94,30 +94,24 @@
     color: transparent;
 }
 
-.halves-group > .halves { /* Container for the two halves of a character; selectable */
+.halves { /* Container for the two halves of a character; selectable */
+    position: relative;
+    /* Prevent .halves elements from being drawn below the background */
+    z-index: 1;
     color: transparent;
     background: transparent;
 }
-.halves-group > .halves:before { /* The left half of a character; not selectable */
+.halves:before, .halves:after { /* The halves of a character; not selectable */
     content: attr(data-text);
     position: absolute;
-    width: 1ch;
-    clip-path: inset(-0.5px); /* 0px causes wierd border line on Chrome and Edge */
+    left: 0px; /* for the left half */
+    width: 50%;
+    overflow: hidden;
     z-index: -1; /* Draw below the selectable text */
 }
-.halves-group > .halves:after { /* The right half of a character; not selectable */
-    content: attr(data-text);
-    position: absolute;
-    margin-left: -1ch;
-    text-indent: -1ch;
-    clip-path: inset(-0.5px); /* 0px causes wierd border line on Chrome and Edge */
-    z-index: -2; /* Draw below the selectable text */
-}
-
-.halves-group { /* Container for a .halves rune group */
-    /* Prevent .halves elements from being drawn below the background */
-    position: relative;
-    z-index: 1;
+.halves:after { /* The right half of a character; not selectable */
+    left: 50%;
+    text-indent: -100%;
 }
 
 .rune {
diff --git a/src/components/cells/Rune.tsx b/src/components/cells/Rune.tsx
index 9719bf1..b1d7b24 100644
--- a/src/components/cells/Rune.tsx
+++ b/src/components/cells/Rune.tsx
@@ -23,20 +23,17 @@ export default (props: Props) => {
         rowIndex = rowIndex || 0
         onMouseDown(e, rowIndex, idx)
     }
+    classNames0.push(...classNamesGroup)
+    let className0 = classNames0.join(' ')
     if (isTwoColor) {
-        classNamesGroup.push(styles['halves-group'])
-        let classNameGroup = classNamesGroup.join(' ')
-        let className0 = classNames0.join(' ')
         return (
-            <span className={classNameGroup}>
+            <>
                 {[...rune.text].map((ch, idx) => (
                     <span key={`${runeKey}-${idx}`} className={className0} onMouseDown={_onMouseDown} data-text={ch}>{ch}</span>
                 ))}
-            </span>
+            </>
         )
     } else {
-        classNames0.push(...classNamesGroup)
-        let className0 = classNames0.join(' ')
         return (
             <span key={runeKey} className={className0} onMouseDown={_onMouseDown}>{rune.text}</span>
         )