Positioning Text Around Elements With CSS Offset

CSS provides a variety of ways to locate page elements, including text, such as position attributes and their corresponding inset-* attributes, translate, margin, anchor() (currently limited browser support), etc. offset Attributes are another option.

offset Attributes are usually used to animate elements along a predetermined path. For example, the square in the following example moves along a circular path:

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

A registered CSS custom attribute (--p) is used to set and animate the square elements. Animation works because offset-distance can be used to locate elements at any point on a given path . You may not know that offset is an abbreviation attribute, composed of the following attributes: offset

• : The starting point of the pathoffset-position
• : The shape in which an element can move along itoffset-path
• : The distance the element moves along the path offset-distance
• : The rotation angle of an element relative to its anchor point and offset pathoffset-rotate
• : Position within an element aligned with the pathoffset-anchor

Attributes are crucial to what we want to achieve. It accepts shape values—including SVG shapes or CSS shape functions—and reference boxes for container elements to create paths.

offset-pathReference frame? These are element sizes determined according to the CSS box model, including

,

, content-box, and SVG contexts such as padding-box, border-box, and view-box. fill-box They simplify how we position elements along the path at the edges of container elements. stroke-boxThe following is an example: All the small squares below are placed in the default upper left corner of their container element . Instead, the small circles are located in the upper right corners of , content-box and content-box respectively (25% of the perimeter of the square of the container element). border-box padding-box

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

Note:

If you do not want to allocate space for elements within the containing parent element, you can detach the layout context of the element. This is the method I took in the example above so that the internal paragraph text can be close to the edge. Therefore, positioned elements (small squares and circles) use offset-positioned to get their own context, which removes them from the normal document stream. offset

This method of positioning relative to the reference frame makes it easy to place elements such as notification points and decorative ribbon tips along the periphery of a certain UI module. It further simplifies how text is placed along the edge of the containing block, because , can also rotate elements along the path. A simple example shows the article date placed on the right edge of the block: offset-rotate offset

<div>
  <div></div>
</div>

As we just saw,

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

uses the

property with the reference frame path and offset container units more efficiently - you can easily set based on the width or height of the contained element. I will include more references on learning about container queries and container queries units in the "Further Reading" section at the end of this article. offset-distanceThe

property is also used in the last example. It provides anchor points for element displacement and rotation—for example, the 90-degree rotation in the example occurs in the lower left corner of the element. The

attribute can also move an element from the reference frame inward or outward by adjusting the offset-anchor value—for example, the offset-anchor parameter pulls the bottom edge of the element outward from the inset-* which contains the element. This enhances the accuracy of placement, as shown below. bottom -10px padding-box

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

As shown at the beginning of the article,

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

positioning is animated, which allows dynamic design effects, such as:

offset

<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>

<div>Published on 11<sup>th</sup> Dec</div>
<cite>An excerpt from the HBR article</cite>

Summary

article {
  container-type: inline-size;
  /* 其他样式 */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;

  /*
    等同于：
    offset-path: padding-box;
    offset-distance: 100cqw; (容器元素宽度的 100%)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

Whether it is for graphic design (such as text along borders), text annotations, or dynamic text (such as error messages), CSS

is an easy-to-use option. We can locate elements along the reference box containing the parent elements, rotate them, and even add animations as needed.

offsetFurther reading

CSS
• Properties: CSS-Tricks, MDNoffset-path
CSS
• Properties: CSS-Tricks, MDNoffset-anchor
Container query length unit:
• CSS-Tricks, MDN
• at-rule: CSS-Tricks, web.dev@property
CSS Box Model:
• CSS-Tricks
SVG Reference Box:
• W3C

The above is the detailed content of Positioning Text Around Elements With CSS Offset. For more information, please follow other related articles on the PHP Chinese website!