Skip to content

text-indent overflows the container box on line 0 #753

Description

@yenbekbay

Description / Observed Behavior

With width: W, text-indent: I, line 0 ends at box_left + W + I (overflowing the box by I). Lines 2+ wrap correctly at W. The indent is applied during positioning but not subtracted from the wrap budget.

Image

In the example above (maxWidth: 190px, textIndent: 40px), line 0 (This is a multiline) extends ~40px past the orange box's right edge.

Expected Behavior

Per CSS, line 0's available text width is W - I, so its right edge should match lines 2+ (box_left + W).

Reproduction

https://og-playground.vercel.app/?share=eJxFjbsKwkAQRX9lGFvBByIYoo2VvWCTZpOZuIPjrmQnMSHk3yVpbO85nDtiFYkxw5ykg2SD8nkciwDwdv1DyHwGBe5O209f4HrejXu7BeJgMzn8Qemq17OJbaBr1NjMdFXXx2pfL8I0XWbr7iWBJHDwbtVEJfCSBPPOIPnYKoF3HYN5hlqaZLBIsnwyQTnAYQsf6VlTEfINSXfBNZorMUPPqvEbGyWcft6pSts%3D

<div style={{
  maxWidth: '190px',
  textIndent: '40px',
  backgroundColor: '#ff6c2f',
}}>
  This is a multiline text that should have the first line indented by 40 pixels
</div>

Additional Context

Introduced in #733 (Satori 0.23.0). Tested against @vercel/og@0.11.1 bundled with Next.js 16.2.6.

Workaround: setting width = container - I keeps line 0 inside the box but truncates lines 2+ by I, since a single width applies to every line.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions