Skip to content

Styling Layout

Flexible and Grid Layouts

document-reader and camera-snapshot components have width and height set to 100% by default and therefore try to fit their container element. This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set flex-basis.

See the example:

document-reader.flex-item {
    width: auto;
    height: auto;
    flex-basis: 500px; // distinct width of your choice
}

CSS Parts

To customize the appearance, use the part attribute and define the desired CSS properties. For example:

document-reader::part(foo) {
    /* Styles to apply to the `foo` part */
    background: red;
}

For more details about ::part() CSS pseudo-elements, see the article at MDN Web Docs.

See the different available customization examples by the following links.

CSS Variables

Using CSS variables, you can change the font and the main color of the components. See the table for the details.

Variable Default Description
--font-family Noto Sans, sans-serif The font family of all text elements. If you change the font family, make sure to adjust the font size so the message on the start screen would fit the frame.
--font-size 16px The font size for the text elements.

The following example demonstrates the document-reader HTML element font customization via the custom CSS class:

.my-custom-style {
    --font-family: Arial, sans-serif;
    --font-size: 13px;
}

<document-reader class="my-custom-style"></document-reader>

Next Steps