ampproject / ampproject/amphtml

amp-fit-text customize justify-content

Open
#35,300 1 comment 0 reactions 0 assignees View on GitHub
Stale Type: Bug Type: Feature Request WG: components
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

Hey Everyone,

I want to be able to set `justify-content` on the `amp-fit-text` element. In my case, I would like `justify-content: flex-start`. (Of course this would get overridden if there is overflowing text and that is OKAY).

In PR #32588 [amp-fit-text:1.0 Vertical center non-overflowing text](https://github.com/ampproject/amphtml/pull/32558) the `amp-fit-text` component was updated to always use `justify-content: center`. It looks like this was done so that `1.0` would have the same functionality as `0.1`.

Perhaps there is a good way to customize the `amp-fit-text` component `justify-content` style? Open to ideas to submit a PR.

### Reproduction Steps

Here is what I am currently seeing with `justify-content: center`.
Screen Shot 2021-07-19 at 10 50 39 PM

Setting `justify-content: flex-start` on the shadow DOM gives this
Screen Shot 2021-07-19 at 10 50 57 PM

### Relevant Logs

_No response_

### Browser(s) Affected

_No response_

### OS(s) Affected

_No response_

### Device(s) Affected

_No response_

### AMP Version Affected

1.0

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the amp-fit-text component and the behavior introduced in PR #32588, especially the change that forces justify-content to center. Determine how a caller could customize that alignment while preserving the existing overflowing-text behavior. Done means non-overflowing text can use a requested value such as flex-start without breaking the component's current overflow handling.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.