Библиотека Layout Индикаторы

Playfair is a transitional design. In the European Enlightenment in the late 18th century, broad nib quills were replaced by pointed steel pens as the popular writing tool of the day. Together with developments in printing technology, ink, and paper making, it became fashionable to print letterforms of high contrast and delicate hairlines that were increasingly detached from the written letterforms. This design lends itself to this period, and while it is not a revival of any particular design, it takes influence from the designs of John Baskerville and from ‘Scotch Roman’ designs.

This typeface was initially published in , and had a major update in Being a Display (large size) design in the transitional genre, functionally and stylistically it can accompany Georgia or Gelasio for body text. It was succeeded in by the complete Playfair design, which as a variable font includes body text designs in the optical size axis.

This is the main family, with a sibling Playfair Display SC small caps family. The main family downloaded font files include a full set of small caps, common ligatures, and discretionary ligatures.

The Playfair project is led by Claus Eggers Sørensen, a type designer based in Amsterdam, Netherlands. To contribute, see eunic-brussels.eu

It is now trivial to customize the color, size or type of number or bullet when using a or .

Thanks to Igalia, sponsored by Bloomberg, we can finally put our hacks away for styling lists. See!

Thanks to CSS we can change the content and some of the styles of bullets and numbers.

Browser compatibility

is supported in Firefox for desktop and Android, desktop Safari and iOS Safari (but only the and properties, see Bug ), and Chromium-based desktop and Android browsers.

Pseudo-elements

Consider the following essential HTML unordered list:

Which results in the following unsurprising rendering:

The dot at the beginning of each item is free! The browser is drawing and creating a generated marker box for you.

Today we're excited to talk about the pseudo-element, which gives the ability to style the bullet element that browsers create for you.

Creating a marker

The pseudo-element marker box is automatically generated inside every list item element, preceding the actual contents and the pseudo-element.

Typically, list items are HTML elements, but other elements can also become list items with .

Styling a marker

Until , lists could be styled using and to change the list item symbol with 1 line of CSS:

That's handy but we need more. What about changing the color, size, spacing, etc!? That's where comes to the rescue. It allows individual and global targeting of these pseudo-elements from CSS:

The property gives very limited styling possibilities. The pseudo-element means that you can target the marker itself and apply styles directly to it. This allows for far more control.

That said, you can't use every CSS property on a . The list of which properties are allowed and not allowed are clearly indicated in the spec. If you try something interesting with this pseudo-element and it doesn't work, the list below is your guide into what can and can't be done with CSS:

Allowed CSS Properties

Changing the contents of a is done with as opposed to . In this next example the first item is styled using and the second with . The properties in the first case apply to the entire list item, not just the marker, which means that the text is animating as well as the marker. When using we can target just the marker box and not the text.

Also, note how the disallowed property has no effect.

Changing the content of a marker

Here are some of the ways you could style your markers.

Changing all list items

Changing just one list item

Changing a list item to SVG

Changing numbered lists What about an though? The marker on an ordered list item is a number and not a bullet by default. In CSS these are called Counters, and they're quite powerful. They even have properties to set and reset where the number starts and ends, or switching them to roman numerals. Can we style that? Yep, and we can even use the marker content value to build our own numbering presentation.

Debugging

Chrome DevTools is ready to help you inspect, debug and modify the styles applying to pseudo elements.

Future Pseudo-element styling

You can find out more about from:

It's great to get access to something which has been hard to style. You might wish that you could style other automatically generated elements. You might be frustrated with or the search input autocomplete indicator, things that are not implemented in the same way across browsers. One way to share what you need is by creating a want at eunic-brussels.eu

Fairness Indicators is designed to support teams in evaluating and improving models for fairness concerns in partnership with the broader Tensorflow toolkit. The tool is currently actively used internally by many of our products, and is now available in BETA to try for your own use cases.

What is Fairness Indicators?

Fairness Indicators is a library that enables easy computation of commonly-identified fairness metrics for binary and multiclass classifiers. Many existing tools for evaluating fairness concerns don’t work well on large scale datasets and models. At Google, it is important for us to have tools that can work on billion-user systems. Fairness Indicators will allow you to evaluate across any size of use case.

In particular, Fairness Indicators includes the ability to:

• Evaluate the distribution of datasets
• Evaluate model performance, sliced across defined groups of users
  • Feel confident about your results with confidence intervals and evals at multiple thresholds
• Dive deep into individual slices to explore root causes and opportunities for improvement

This case study, complete with videos and programming exercises, demonstrates how Fairness Indicators can be used on one of your own products to evaluate fairness concerns over time.

The pip package download includes:

Using Fairness Indicators with Tensorflow Models

Data

To run Fairness Indicators with TFMA, make sure the evaluation dataset is labelled for the features you would like to slice by. If you don't have the exact slice features for your fairness concerns, you may explore trying to find an evaluation set that does, or considering proxy features within your feature set that may highlight outcome disparities. For additional guidance, see here.

Model

You can use the Tensorflow Estimator class to build your model. Support for Keras models is coming soon to TFMA. If you would like to run TFMA on a Keras model, please see the “Model-Agnostic TFMA” section below.

After your Estimator is trained, you will need to export a saved model for evaluation purposes. To learn more, see the TFMA guide.

Configuring Slices

Next, define the slices you would like to evaluate on:

If you want to evaluate intersectional slices (for example, both fur color and height), you can set the following:

Compute Fairness Metrics

Add a Fairness Indicators callback to the list. In the callback, you can define a list of thresholds that the model will be evaluated at.

Before running the config, determine whether or not you want to enable computation of confidence intervals. Confidence intervals are computed using Poisson bootstrapping and require recomputation over 20 samples.

Run the TFMA evaluation pipeline:

Render Fairness Indicators

Tips for using Fairness Indicators:

• Select metrics to display by checking the boxes on the left hand side. Individual graphs for each of the metrics will appear in the widget, in order.
• Change the baseline slice, the first bar on the graph, using the dropdown selector. Deltas will be calculated with this baseline value.
• Select thresholds using the dropdown selector. You can view multiple thresholds on the same graph. Selected thresholds will be bolded, and you can click a bolded threshold to un-select it.
• Hover over a bar to see metrics for that slice.
• Identify disparities with the baseline using the "Diff w. baseline" column, which identifies the percentage difference between the current slice and the baseline.
• Explore the data points of a slice in depth using the What-If Tool. See here for an example.

Rendering Fairness Indicators for Multiple Models

Fairness Indicators can also be used to compare models. Instead of passing in a single eval_result, pass in a multi_eval_results object, which is a dictionary mapping two model names to eval_result objects.

Model comparison can be used alongside threshold comparison. For example, you can compare two models at two sets of thresholds to find the optimal combination for your fairness metrics.

Using Fairness Indicators with non-TensorFlow Models

To better support clients that have different models and workflows, we have developed an evaluation library which is agnostic to the model being evaluated.

Anyone who wants to evaluate their machine learning system can use this, especially if you have non-TensorFlow based models. Using the Apache Beam Python SDK, you can create a standalone TFMA evaluation binary and then run it to analyze your model.

Data

This step is to provide the dataset you want the evaluations to run on. It should be in eunic-brussels.eue proto format having labels, predictions and other features you might want to slice on.

Model

Instead of specifying a model, you an create a model agnostic eval config and extractor to parse and provide the data TFMA needs to compute metrics. ModelAgnosticConfig spec defines the features, predictions, and labels to be used from the input examples.

For this, create a feature map with keys representing all the features including label and prediction keys and values representing the data type of the feature.

Create a model agnostic config using label keys, prediction keys and the feature map.

Extractor is used to extract the features, labels and predictions from the input using model agnostic config. And if you want to slice your data, you also need to define the slice key spec, containing information about the columns you want to slice on.

Compute Fairness Metrics

As part of EvalSharedModel, you can provide all the metrics on which you want your model to be evaluated. Metrics are provided in the form of metrics callbacks like the ones defined in post_export_metrics or fairness_indicators.

It also takes in a which is used to create a tensorflow graph to perform the evaluation.

Once everything is set up, use one of or functions provided by model_eval_lib to evaluate the model.

Finally, render Fairness Indicators using the instructions from the "Render Fairness Indicators" section above.

More Examples

The Fairness Indicators examples directory contains several examples:

Cumulative Layout Shift (CLS) is a stable Core Web Vital metric. It's an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts. A low CLS helps ensure that the page is delightful.

Unexpected layout shifts can disrupt the user experience in many ways, from causing them to lose their place while reading if the text moves suddenly, to making them click the wrong link or button. In some cases, this can do serious damage.

Unexpected movement of page content usually happens when resources load asynchronously or DOM elements are dynamically added to the page before existing content. The cause of the movement might be an image or video with unknown dimensions, a font that renders larger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.

Differences between how a site function in development and how its users experience it make this problem worse. For example:

• Personalized or third-party content often behaves differently in development and in production.
• Test images are often already in the developer's browser cache, but take longer to load for the end user.
• API calls that run locally are often so fast that unnoticeable delays in development can become substantial in production.

The Cumulative Layout Shift (CLS) metric helps you address this problem by measuring how often it happens for real users.

What is CLS?

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the lifespan of a page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. See Layout shift score for details on how these shifts are measured.

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1 second between each shift, during a maximum period of 5 seconds.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

What is a good CLS score?

To provide a good user experience, a site must have a CLS score of or less. To ensure you're hitting this target for most of your users, we recommend measuring the 75th percentile of page loads, segmented across mobile and desktop devices.

To learn more about the research and methodology behind this recommendation, see Defining the Core Web Vitals metrics thresholds.

Layout shifts in detail

Layout shifts are defined by the Layout Instability API, which reports entries any time an element visible within the viewport changes its start position (for example, its top and left position in the default writing mode) between two frames. Elements whose start positions changes are considered unstable elements.

Layout shifts only happen when existing elements change their start position. If a new element is added to the DOM or an existing element changes size, it only counts as a layout shift if the change causes other visible elements to change their start position.

Layout shift score

To calculate the layout shift score, the browser considers the viewport size and the movement of unstable elements in the viewport between two rendered frames. The layout shift score is a product of two measures of that movement: the impact fraction and the distance fraction.

Impact fraction

The impact fraction measures how unstable elements impact the viewport area between two frames.

The impact fraction for a given frame is a combination of the visible areas of all unstable elements for that frame and the previous frame, as a fraction of the total area of the viewport.

This image shows an element that takes up half of the viewport in one frame. In the next frame, the element shifts down by 25% of the viewport height. The red dashed rectangle indicates the element's visible area over both frames, which, in this case, is 75% of the total viewport, so its impact fraction is .

Distance fraction

The other part of the layout shift score equation measures the distance that unstable elements have moved relative to the viewport. The distance fraction is the greatest horizontal or vertical distance any unstable element has moved in the frame divided by the viewport's largest dimension (width or height, whichever is greater).

In this example, the largest viewport dimension is the height, and the unstable element has moved by 25% of the viewport height, which makes the distance fraction .

An impact fraction of and a distance fraction of produce a layout shift score of .

Examples

The next example illustrates how adding content to an existing element affects the layout shift score:

In this example, the gray box changes size, but its start position doesn't change, so it's not an unstable element.

The "Click Me!" button wasn't in the DOM previously, so its start position doesn't change either.

The start position of the green box does change, but it's been moved partly out of the viewport, and the invisible area isn't considered when calculating the impact fraction. The union of the visible areas for the green box in both frames (the red dashed rectangle) is the same as the area of the green box in the first frame—50% of the viewport. The impact fraction is .

The distance fraction is illustrated by the blue arrow. The green box has moved down by about 14% of the viewport, so the distance fraction is .

The layout shift score is .

The following example shows how multiple unstable elements affect a page's layout shift score:

The first item in the list ("Cat") doesn't change its start position between frames, so it's stable. The new items added to the list weren't previously in the DOM, so their start positions don't change either. But the items labeled "Dog", "Horse", and "Zebra" all shift their start positions, making them unstable elements.

Again, the red dashed rectangle represents the area of these three unstable elements before and after the shift, which in this case is around 60% of the viewport area (impact fraction of ).

The arrows represent the distances that unstable elements have moved from their starting positions. The "Zebra" element, represented by the blue arrow, has moved the most, by about 30% of the viewport height. That makes the distance fraction in this example .

The layout shift score is .

Expected versus unexpected layout shifts

Not all layout shifts are bad. In fact, many dynamic web applications frequently change the start position of elements on the page. A layout shift is only bad if the user isn't expecting it.

User-initiated layout shifts

Layout shifts that occur in response to user interactions (such as clicking or tapping a link, pressing a button, or typing in a search box) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.

For example, if a user interaction triggers a network request that might take a while to complete, it's best to create some space right away and show a loading indicator to avoid an unpleasant layout shift when the request completes. If the user doesn't realize something is loading, or doesn't have a sense of when the resource will be ready, they might try to click something else while waiting, and that other element might move out from under them when the first one finishes loading.

Layout shifts that occur within milliseconds of user input will have the flag set, so you can exclude them from calculations.

Animations and transitions

Animations and transitions, when done well, are a great way to update content on the page without surprising the user. Content that shifts abruptly and unexpectedly on the page almost always creates a bad user experience. However, content that moves gradually and naturally from one position to another can often help the user better understand what's going on, and guide them between state changes.

Be sure to respect browser settings, because animation can cause health or attention issues for some site visitors.

The CSS property lets you animate elements without triggering layout shifts:

• Use instead of changing the and properties.
• To move elements around, use instead of changing the , , , or properties.

How to measure CLS

CLS can be measured in the lab or in the field, and it's available in the following tools.

Field tools

Lab tools

Measure layout shifts in JavaScript

To measure layout shifts in JavaScript, use the Layout Instability API.

The following example shows how to create a to log entries to the console:

Measure CLS in JavaScript

To measure CLS in JavaScript, group the unexpected entries you've logged into sessions and calculate the maximum session value. For a reference implementation, refer to the JavaScript library source code.

In most cases, the CLS value at the time the page is being unloaded is the final CLS value for that page, but there are a few important exceptions listed in the next section. The JavaScript library accounts for these as much as possible, within the limitations of the Web APIs.

Differences between the metric and the API

• If a page is loaded in the background, or if it's backgrounded before the browser paints any content, it shouldn't report any CLS value.
• If a page is restored from the back or forward cache, its CLS value should be reset to zero because users experience this as a distinct page visit.
• The API doesn't report entries for shifts that occur within iframes, but the metric does because they're part of the user experience of the page. This can show as a difference between CrUX and RUM. To measure CLS properly, you must include iframes. Sub-frames can use the API to report their entries to the parent frame for aggregation.

In addition to these exceptions, CLS has even more complexity because it measures the entire lifespan of a page:

• Users might keep a tab open for a very long time—days, weeks, even months. In fact, a user might never close a tab.
• On mobile operating systems, browsers typically don't run page unload callbacks for background tabs, making it difficult to report the "final" value.

To handle such cases, we recommend that your system report CLS any time a page is backgrounded, in addition to any time it's unloaded. The event covers both of these scenarios. Analytics systems receiving this data will then need to calculate the final CLS value on the backend.

Instead of memorizing and grappling with all of these cases yourself, developers can use the JavaScript library to measure CLS, which accounts for everything mentioned here except the iframe case:

How to improve CLS

For more guidance on identifying layout shifts in the field and using lab data to optimize them, see our guide to optimizing CLS.

Additional resources

Changelog

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics is surfaced in this Changelog.

If you have feedback for these metrics, provide it in the web-vitals-feedback Google group.