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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions