amphtml: ITI: Support for text clamp/truncation that doesn't require display: -webkit-box;

Summary

Support for text clamp/truncation that doesn’t require display: -webkit-box;

Motivation

When amp-fit-text is used to line clamp text the element is styled with display: -webkit-box; and -webkit-box-orient: vertical;, which prevents content float/clear from working within the div.

Specifically, we have a design that includes a couple lines of teaser text with a click-for-more CTA. We were hoping to use <amp-fit-text> to clamp at 2 lines, and conditionally include a “see more” button that floats to the right. Something like this:

image

But the existing line clamp functionality completely breaks this, reordering the components in order vertically (-webkit-box-orient: vertical;) and overriding initial styles for font-size and line-height (the “see more” button and plain text had slightly different styling).

Another example with different font sizes: image

Design

Since the CSS-only version of line-clamp is insufficient, we would implement the line clamp with javascript.

We will build a new component, <amp-clamp-text>, to implement only the text clamping feature. This component will be built to be composeable with the existing <amp-fit-text> component. For instance:

<amp-fit-text min-font-size=30>
  <amp-clamp-text>
  stuff
    <button overflow> 
        See more
    </button>
 </amp-clamp-text>
</amp-fit-text>

Should shrink/grow text within the constraints of the <amp-fit-text> component, then truncate overflow according to <amp-clamp-text>. the <button overflow> should only be visible when the text in the <amp-clamp-text> overflows.

The new component will rely on a fixed size layout, and truncate text accordingly.

Initial attempt and additional discussion: https://github.com/ampproject/amphtml/pull/20341

/cc @aghassemi @sparhami

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 29 (20 by maintainers)

Most upvoted comments

This is now implemented as the <amp-truncate-text> component. It currently requires the amp-truncate-text experiment to be enabled. This can be done via the browser console:

AMP.toggleExperiment('amp-truncate-text', true);

/cc @cpapazian If you have time, can you try this out and see if it fits your use case?

@cpapazian @sparhami

Regarding different component, I sampled a few live usages of amp-fit-text, and to my surprise, using amp-fit-text to clamp text by setting min and max font to the same value seems more common than I expected and that’s not at all the main point of that component.

I am leaning toward the idea of a new <amp-clamp-text>. @cpapazian in your particular use-case, is scaling of the text needed at all?

This is definitely good discussion in the I2I. The new component could purely use the JS implementation and expand feature could be built in via a default (and overridable) UI. We may provide an opt-out for the expand feature.

Even if text scaling and clamping at the same time is a common need, composition may be a better approach:

<amp-fit-text min-font-size=30>
  <amp-clamp-text>
  stuff
    <button overflow> 
        See more
    </button>
 </amp-clamp-text>
</amp-fit-text>

(we can make the above work by stoping amp-fit-text from applying overflow when there is a amp-clamp-text present as child and let that handle the overflow)

Thanks @cpapazian.

Assigning the issue and PR to @sparhami to see it through merge. Sepand has done some thinking about this.

I’ll leave it to you and @sparhami to discuss the API and get it reviewed in of the design meetings if needed, below are some of my thoughts:

1- I am okay with JS truncation, it adds a few additional relayouts but fit-text already does 4 or 5 I believe. 2- I don’t fully understand the overflow="fit | truncate" proposal in #15448. Overflow is implicit (when min-font-size is specified) and is always has to truncate, I don’t see what “fit” means here. That being said, we would want to allow: A- developer can specify an element that is displayed when overflow happens, developer can decide what tapping on that does, it can expand or does something else (open modal, navigate) B- (maybe) we provide a default UI that expands the text on tap (overridable by 2A)

the JS vs CSS implementations of overflow seem orthogonal to the above. Some versions of UIs in 2 are doable without JS version and some are not.

The reason I figured a new attribute made sense was that I would only want it to be visible if the text was overflown, though we could do that with a CSS class.

Aside from that, a myFitText.expand action sounds good to me.

(don’t expect you guys to prioritize this … we can find resources if it ends up being a must-have for us).

(in all honestly, unlikely we can prioritize this. PRs welcomed and appreciated of course. We can move much faster on reviews than infinite list from back then as this is a much more contained feature)

@cpapazian Thanks. Too bad JS is not avoidable for this. For https://github.com/ampproject/amphtml/issues/15448, we could just add an new action like myFitText.expand and let pubs implement the overflow instead of a new attribute.

we’re hoping to do something like this: image

in an amp-story page. I’d like the text to flow around the “More” button in the bottom right, rather than under. This is pretty easy to to do with float:right.