Incorrect spaces count of East Asian characters

nunomaduro · Jun 3, 2024 · f2442e1 · f2442e1
1 parent 9c030e6
commit f2442e1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/ValueObjects/Styles.php b/src/ValueObjects/Styles.php
@@ -644,7 +644,7 @@ final public function contentRepeat(string $string): self
     {
         $string = preg_replace("/\[?'?([^'|\]]+)'?\]?/", '$1', $string) ?? '';
 
-        $this->textModifiers[__METHOD__] = static fn (): string => str_repeat($string, (int) floor(terminal()->width() / mb_strlen($string, 'UTF-8')));
+        $this->textModifiers[__METHOD__] = static fn (): string => str_repeat($string, (int) floor(terminal()->width() / mb_strwidth($string, 'UTF-8')));
 
         return $this->with(['styles' => [
             'contentRepeat' => true,
@@ -855,7 +855,7 @@ private function applyWidth(string $content): string
         preg_match_all("/\n+/", $content, $matches);
 
         $width *= count($matches[0] ?? []) + 1;
-        $width += mb_strlen($matches[0][0] ?? '', 'UTF-8');
+        $width += mb_strwidth($matches[0][0] ?? '', 'UTF-8');
 
         if ($length <= $width) {
             $space = $width - $length;
@@ -942,7 +942,7 @@ private function applyStyling(string $content): string
      */
     public function getLength(?string $text = null): int
     {
-        return mb_strlen(preg_replace(
+        return mb_strwidth(preg_replace(
             self::STYLING_REGEX,
             '',
             $text ?? $this->element?->toString() ?? ''

diff --git a/tests/render.php b/tests/render.php
@@ -259,7 +259,37 @@
         </div>
     HTML);
 
-    expect($html)->toBe("        \n\n<fg=#ef4444> ⚽️ </> A  ");
+    expect($html)->toBe("        \n\n<fg=#ef4444> ⚽️ </> A ");
+});
+
+it('renders East Asian characters chains of text-center with spaces correctly', function () {
+    $html = parse(<<<'HTML'
+        <div class="w-32">
+            <div class="w-full bg-yellow text-center">你好 世界</div>
+            <div class="w-full bg-yellow text-center">ハローワールド</div>
+        </div>
+    HTML);
+
+    expect($html)->toBe("<bg=yellow>           你好 世界            </>\n<bg=yellow>         ハローワールド         </>");
+});
+
+it('renders East Asian characters chains of space between with spaces correctly', function () {
+    $html = parse(<<<'HTML'
+        <div class="w-32">
+            <div class="flex mx-2">
+                <span>Termwind</span>
+                <span class="flex-1"></span>
+                <span>你好 世界</span>
+            </div>
+            <div class="flex mx-2">
+                <span>Termwind</span>
+                <span class="flex-1"></span>
+                <span>ハローワールド</span>
+            </div>
+        </div>
+    HTML);
+
+    expect($html)->toBe("  Termwind           你好 世界  \n  Termwind      ハローワールド  ");
 });
 
 it('renders multiple chains of w-full with margins and text-alignment', function () {