sketch/css/length · sketch

cap

pub fn cap(value: Float) -> Length

Represents the “cap height” (nominal height of capital letters) of the element’s font.

MDN Reference

ch

</>

pub fn ch(value: Float) -> Length

Represents the width or, more precisely, the advance measure of the glyph 0 (zero, the Unicode character U+0030) in the element’s font. In cases where determining the measure of the 0 glyph is impossible or impractical, it must be assumed to be 0.5em wide by 1em tall.

MDN Reference

cm

</>

pub fn cm(value: Int) -> Length

One centimeter. 1cm = 96px / 2.54.

MDN Reference

cm_

</>

pub fn cm_(value: Float) -> Length

One centimeter. 1cm = 96px / 2.54.

MDN Reference

cqb

</>

pub fn cqb(value: Int) -> Length

Represents a percentage of the block size of the query container. 1cqb is 1% of the query container’s block size. For example, if the query container’s block size is 300px, then a value of 10cqb on a property will be 30px.

MDN Reference

cqb_

</>

pub fn cqb_(value: Float) -> Length

Represents a percentage of the block size of the query container. 1cqb is 1% of the query container’s block size. For example, if the query container’s block size is 300px, then a value of 10cqb on a property will be 30px.

MDN Reference

cqh

</>

pub fn cqh(value: Int) -> Length

Represents a percentage of the height of the viewport’s initial containing block. 1vh is 1% of the viewport height. For example, if the query container’s height is 300px, then a value of 70vh on a property will be 210px.

MDN Reference

cqh_

</>

pub fn cqh_(value: Float) -> Length

Represents a percentage of the height of the query container. 1cqh is 1% of the query container’s height. For example, if the query container’s height is 300px, then a value of 70vh on a property will be 210px.

MDN Reference

cqi

</>

pub fn cqi(value: Int) -> Length

Represents a percentage of the inline size of the query container. 1cqi is 1% of the query container’s inline size. For example, if the query container’s inline size is 800px, then a value of 50cqi on a property will be 400px.

MDN Reference

cqi_

</>

pub fn cqi_(value: Float) -> Length

Represents a percentage of the inline size of the query container. 1cqi is 1% of the query container’s inline size. For example, if the query container’s inline size is 800px, then a value of 50cqi on a property will be 400px.

MDN Reference

cqmax

</>

pub fn cqmax(value: Int) -> Length

Represents a percentage of the larger value of either the query container’s inline size or block size. 1cqmax is 1% of the larger value of either the query container’s inline size or block size. For example, if the query container’s inline size is 800px and its block size is 300px, then a value of 50cqmax on a property will be 400px.

MDN Reference

cqmax_

</>

pub fn cqmax_(value: Float) -> Length

Represents a percentage of the larger value of either the query container’s inline size or block size. 1cqmax is 1% of the larger value of either the query container’s inline size or block size. For example, if the query container’s inline size is 800px and its block size is 300px, then a value of 50cqmax on a property will be 400px.

MDN Reference

cqmin

</>

pub fn cqmin(value: Int) -> Length

Represents a percentage of the smaller value of either the query container’s inline size or block size. 1cqmin is 1% of the smaller value of either the query container’s inline size or block size. For example, if the query container’s inline size is 800px and its block size is 300px, then a value of 50cqmin on a property will be 150px.

MDN Reference

cqmin_

</>

pub fn cqmin_(value: Float) -> Length

Represents a percentage of the smaller value of either the query container’s inline size or block size. 1cqmin is 1% of the smaller value of either the query container’s inline size or block size. For example, if the query container’s inline size is 800px and its block size is 300px, then a value of 50cqmin on a property will be 150px.

MDN Reference

cqw

</>

pub fn cqw(value: Int) -> Length

Represents a percentage of the width of the query container. 1cqw is 1% of the query container’s width. For example, if the query container’s width is 800px, then a value of 50vh on a property will be 400px.

MDN Reference

cqw_

</>

pub fn cqw_(value: Float) -> Length

Represents a percentage of the width of the query container. 1cqw is 1% of the query container’s width. For example, if the query container’s width is 800px, then a value of 50vh on a property will be 400px.

MDN Reference

em

</>

pub fn em(value: Float) -> Length

Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element.

MDN Reference

ex

</>

pub fn ex(value: Float) -> Length

Represents the x-height of the element’s font. In fonts with the x letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

MDN Reference

ic

</>

pub fn ic(value: Float) -> Length

Equal to the used advance measure of the “水” glyph (CJK water ideograph, U+6C34), found in the font used to render it.

MDN Reference

in

</>

pub fn in(value: Int) -> Length

One inch. 1in = 2.54cm = 96px.

MDN Reference

in_

</>

pub fn in_(value: Float) -> Length

One inch. 1in = 2.54cm = 96px.

MDN Reference

lh

</>

pub fn lh(value: Float) -> Length

Equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length. This unit enables length calculations based on the theoretical size of an ideal empty line. However, the size of actual line boxes may differ based on their content.

MDN Reference

mm

</>

pub fn mm(value: Int) -> Length

One millimeter. 1mm = 1cm / 10.

MDN Reference

mm_

</>

pub fn mm_(value: Float) -> Length

One millimeter. 1mm = 1cm / 10.

MDN Reference

pc

</>

pub fn pc(value: Int) -> Length

One pica. 1pc = 12pt = 1in / 6.

MDN Reference

pc_

</>

pub fn pc_(value: Float) -> Length

One pica. 1pc = 12pt = 1in / 6.

MDN Reference

percent

</>

pub fn percent(value: Int) -> Length

Represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

MDN Reference

percent_

</>

pub fn percent_(value: Float) -> Length

Represents a percentage value. It is often used to define a size as relative to an element’s parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.

MDN Reference

pt

</>

pub fn pt(value: Int) -> Length

One point. 1pt = 1in / 72.

MDN Reference

pt_

</>

pub fn pt_(value: Float) -> Length

One point. 1pt = 1in / 72.

MDN Reference

px

</>

pub fn px(value: Int) -> Length

One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1in / 96.

MDN Reference

px_

</>

pub fn px_(value: Float) -> Length

One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1in / 96.

MDN Reference

q

</>

pub fn q(value: Int) -> Length

One quarter of a millimeter. 1Q = 1cm / 40.

MDN Reference

q_

</>

pub fn q_(value: Float) -> Length

One quarter of a millimeter. 1Q = 1cm / 40.

MDN Reference

rcap

</>

pub fn rcap(value: Float) -> Length

Equal to the “cap height” (nominal height of capital letters) of the root element’s font.

MDN Reference

rch

</>

pub fn rch(value: Float) -> Length

Equal to the width or the advance measure of the glyph 0 (zero, the Unicode character U+0030) in the root element’s font.

MDN Reference

rem

</>

pub fn rem(value: Float) -> Length

Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value. A common browser default is 16px, but user-defined preferences may modify this.

MDN Reference

rex

</>

pub fn rex(value: Float) -> Length

Represents the x-height of the root element’s font. In fonts with the x letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.

MDN Reference

ric

</>

pub fn ric(value: Float) -> Length

Equal to the value of ic unit on the root element’s font.

MDN Reference

rlh

</>

pub fn rlh(value: Float) -> Length

Equal to the value of lh unit on the root element’s font. This unit enables length calculations based on the theoretical size of an ideal empty line. However, the size of actual line boxes may differ based on their content.

MDN Reference

vb

</>

pub fn vb(value: Int) -> Length

Represents the percentage of the size of the initial containing block, in the direction of the root element’s block axis.

MDN Reference

vb_

</>

pub fn vb_(value: Float) -> Length

Represents the percentage of the size of the initial containing block, in the direction of the root element’s block axis.

MDN Reference

vh

</>

pub fn vh(value: Int) -> Length

Represents a percentage of the height of the viewport’s initial containing block. 1cqh is 1% of the query container’s height. For example, if the viewport height is 300px, then a value of 70vh on a property will be 210px.

MDN Reference

vh_

</>

pub fn vh_(value: Float) -> Length

Represents a percentage of the height of the viewport’s initial containing block. 1cqh is 1% of the query container’s height. For example, if the viewport height is 300px, then a value of 70vh on a property will be 210px.

MDN Reference

vi

</>

pub fn vi(value: Int) -> Length

Represents the percentage of the size of the initial containing block, in the direction of the root element’s inline axis.

MDN Reference

vi_

</>

pub fn vi_(value: Float) -> Length

Represents the percentage of the size of the initial containing block, in the direction of the root element’s inline axis.

MDN Reference

vmax

</>

pub fn vmax(value: Int) -> Length

Represents in percentage the larget of vw and vh.

MDN Reference

vmax_

</>

pub fn vmax_(value: Float) -> Length

Represents in percentage the larget of vw and vh.

MDN Reference

vmin

</>

pub fn vmin(value: Int) -> Length

Represents in percentage the smallest of vw and vh.

MDN Reference

vmin_

</>

pub fn vmin_(value: Float) -> Length

Represents in percentage the smallest of vw and vh.

MDN Reference

vw

</>

pub fn vw(value: Int) -> Length

Represents a percentage of the width of the viewport’s initial containing block. 1vw is 1% of the viewport width. For example, if the viewport width is 800px, then a value of 50vh on a property will be 400px.

MDN Reference

vw_

</>

pub fn vw_(value: Float) -> Length

Represents a percentage of the width of the viewport’s initial containing block. 1vw is 1% of the viewport width. For example, if the viewport width is 800px, then a value of 50vh on a property will be 400px.

MDN Reference