Box border alignment issue with emoji characters #733
Description
Description
When using emoji characters inside Ink's Box component, the left border becomes misaligned, causing visual rendering issues.
Expected Behavior
Box borders should remain properly aligned regardless of the content inside, including emoji characters.
Actual Behavior
The left border of boxes containing emoji characters appears misaligned or displaced, breaking the visual consistency of the box rendering.
Reproduction Steps
- Create an Ink component with a Box
- Add emoji characters to the box content (e.g., ✅, 🏠)
- Render the component
- Observe the left border alignment issue
Code Example
import React from 'react';
import { render, Box, Text } from 'ink';
const BoxDemo: React.FC = () => {
return (
<Box flexDirection="column" padding={2}>
<SimpleBox title="Simple Box Example" color="cyan" borderColor="blue">
<Text>This is content inside a simple box!</Text>
<Text>No calculations, just pure Ink styling.</Text>
</SimpleBox>
<SimpleBox title="Another Box" color="green" borderColor="green">
<Text>Multiple lines of text ✅, ⏳</Text>
<Text>work perfectly fine</Text>
<Text color="yellow">with different colors</Text>
</SimpleBox>
<SimpleBox borderColor="red">
<Text>This box has no title</Text>
<Text>but still looks great!</Text>
</SimpleBox>
</Box>
);
};
interface SimpleBoxProps {
children?: React.ReactNode;
title?: string;
color?: string;
borderColor?: string;
}
const SimpleBox: React.FC<SimpleBoxProps> = ({
children,
title,
color = 'white',
borderColor = 'gray'
}) => {
return (
<Box
borderStyle="single"
borderColor={borderColor}
padding={1}
margin={1}
flexDirection="column"
>
{title && (
<Text color={color} bold>
{title}
</Text>
)}
{children}
</Box>
);
};
render(<BoxDemo />);
Environment
- Node.js version: v22.16.0
- Dependencies
@types/node@20.19.8
@types/react@19.1.8
@typescript-eslint/eslint-plugin@6.21.0
@typescript-eslint/parser@6.21.0
chalk@4.1.2
commander@11.1.0
eslint@8.57.1
eventemitter3@5.0.1
figures@6.1.0
ink-gradient@3.0.0
ink-spinner@5.0.0
ink@6.0.1
react@19.1.0
string-width@4.2.2
ts-node@10.9.2
tsx@4.20.3
typescript@5.8.3