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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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