fix text align

src/pages/viewer/components/BookPage.tsx

@@ -5,10 +5,8 @@ import { toCssLinearGradient } from '@/pages/editor/utils/gradient';
 import { getFontFamily } from '@/pages/editor/utils/fontFamily';
 import {
   getCssFontWeight,
-  getEffectiveTextWidth,
-  getScaledTextWidth,
+  getViewerTextLayout,
   usesWrappedLayout,
-  SINGLE_LINE_WIDTH_SLACK_PX,
 } from '@/pages/editor/utils/textStyle';
 import '@/pages/viewer/styles/entranceAnimations.css';
 import { mergeEntranceAnimationStyle } from '@/pages/viewer/utils/entranceAnimationStyle';
@@ -131,51 +129,41 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
             letterSpacing: obj.letterSpacing ?? 0,
             lineHeight,
           };
-          const layoutWidth = wrapped
-            ? getEffectiveTextWidth(obj.width, obj.text, measureOpts, false)
-            : undefined;
-          const textWidth = wrapped ? getScaledTextWidth(layoutWidth, scale) : undefined;
-          // getScaledTextWidth adds SINGLE_LINE_WIDTH_SLACK_PX to prevent unwanted CSS wrapping.
-          // Compensate by shifting textLeft left by the same amount so the right edge stays at obj.x * scale.
-          const textSlackPx = textWidth !== undefined ? Math.ceil(SINGLE_LINE_WIDTH_SLACK_PX * scale) : 0;
-          const textLeft = wrapped
-            ? Math.round(((obj.x || 0) - (layoutWidth || obj.width || 0)) * scale) - textSlackPx
-            : Math.round((obj.x || 0) * scale);
-          const textTransform = wrapped
-            ? rotation
-              ? `rotate(${rotation}deg)`
-              : undefined
-            : rotation
-              ? `rotate(${rotation}deg) translateX(-100%)`
-              : 'translateX(-100%)';
+          const textLayout = getViewerTextLayout({
+            x: obj.x || 0,
+            width: obj.width,
+            text: obj.text,
+            textAlign: obj.textAlign,
+            rotation,
+            scale,
+            measureOpts,
+            wrapped,
+          });
           return (
             <div
               key={obj.id || index}
               style={withEntrance(
                 {
                   ...textBaseStyle,
-                  left: `${textLeft}px`,
-                  width: wrapped ? (textWidth ? `${textWidth}px` : undefined) : 'max-content',
-                  maxWidth: wrapped ? undefined : 'none',
+                  left: `${textLayout.leftPx}px`,
+                  width: textLayout.widthPx !== undefined ? `${textLayout.widthPx}px` : 'max-content',
                   fontSize: `${fontSize * scale}px`,
                   fontFamily: getFontFamily(obj.fontFamily),
                   fontWeight: getCssFontWeight(obj.fontWeight),
                   lineHeight,
-                  textAlign: obj.textAlign ?? 'right',
+                  textAlign: textLayout.textAlign,
                   direction: 'rtl',
                   color: getColorWithOpacity(obj.fill, obj.opacity),
                   whiteSpace: wrapped ? 'pre-wrap' : 'nowrap',
                   overflowWrap: wrapped ? 'break-word' : 'normal',
                   letterSpacing: obj.letterSpacing ? `${obj.letterSpacing * scale}px` : undefined,
                   boxSizing: 'content-box',
-                  transform: textTransform,
-                  transformOrigin: wrapped ? 'top left' : 'top right',
+                  transform: textLayout.transform,
+                  transformOrigin: textLayout.transformOrigin,
                 },
                 obj,
                 index,
-                wrapped
-                  ? { rotationDeg: rotation, transformOrigin: 'top left' }
-                  : { rotationDeg: rotation, transformOrigin: 'top right' },
+                { rotationDeg: rotation, transformOrigin: textLayout.transformOrigin },
               )}
             >
               {obj.text || ''}