Skip to content

Latest commit

 

History

History
103 lines (82 loc) · 4.46 KB

amp-fit-text.md

File metadata and controls

103 lines (82 loc) · 4.46 KB
Raw

amp-fit-text

Description Expands or shrinks its font size to fit the content within the space given to it.
Availability Stable
Required Script <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Examples image_galleries_with_amp-carousel.html
everything.amp.html

The following lists validation errors specific to the amp-fit-text tag (see also amp-fit-text in the AMP validator specification):

Validation Error Description
The 'example1' tag is missing or incorrect, but required by 'example2'. Error thrown when required amp-fit-text extension .js script tag is missing or incorrect.
The implied layout 'example1' is not supported by tag 'example2'. Error thrown when implied layout is set to CONTAINER; this layout type isn't supported.
The specified layout 'example1' is not supported by tag 'example2'. Error thrown when specified layout is set to CONTAINER; this layout type isn't supported.
The property 'example1' in attribute 'example2' in tag 'example3' is set to 'example4', which is invalid. Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY.

Behavior

The amp-fit-text component expects its content to be text or other inline content, but it can also contain non-inline content. For the given content the amp-fit-text will try to find the best font size to fit all of the content within the available space.

If content of the amp-fit-text is overflowing the available space event with the minimum font size, the overflowing content will be cut off and hidden. The WebKit and Blink-based browsers will show ellipsis in this case.

The amp-fit-text accepts one of the following layout values: fixed, fixed-height, responsive or fill.

For example:

<amp-fit-text width="300" height="200" layout="responsive"
    max-font-size="52">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
  inermis reprehendunt.
</amp-fit-text>

Attributes

min-font-size

The minimum font size as an integer that the amp-fit-text can use.

max-font-size

The maximum font size as an integer that the amp-fit-text can use.

Styling

The amp-fit-text component can be styled with standard CSS. In particular, it's possible to use text-align, font-weight, color and many other CSS properties with the main exception of font-size.