caisin/typst
1
0
Fork 0
mirror of https://github.com/typst/typst synced 2025-05-14 17:15:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adjust gradient docs

Browse Source
This commit is contained in:
Laurenz 2023-10-04 15:34:53 +02:00
parent 88914324fe
commit ea0f22a8ca
1 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
crates/typst/src/geom/gradient.rs
View File

@ -19,7 +19,7 @@ use crate::syntax::{Span, Spanned};
/// See the [tracking issue](https://github.com/typst/typst/issues/2282) for /// See the [tracking issue](https://github.com/typst/typst/issues/2282) for
/// more details on the progress of gradient implementation. /// more details on the progress of gradient implementation.
/// ///
/// ## Stops /// # Stops
/// A gradient is composed of a series of stops. Each of these stops has a color /// A gradient is composed of a series of stops. Each of these stops has a color
/// and an offset. The offset is a [ratio]($ratio) between `{0%}` and `{100%}` /// and an offset. The offset is a [ratio]($ratio) between `{0%}` and `{100%}`
/// that determines how far along the gradient the stop is located. The stop's /// that determines how far along the gradient the stop is located. The stop's
@ -27,7 +27,7 @@ use crate::syntax::{Span, Spanned};
/// the offsets when defining a gradient. In this case, Typst will space all /// the offsets when defining a gradient. In this case, Typst will space all
/// stops evenly. /// stops evenly.
/// ///
/// ## Usage /// # Usage
/// Gradients can be used for the following purposes: /// Gradients can be used for the following purposes:
/// - As fills to paint the interior of a shape: /// - As fills to paint the interior of a shape:
/// `{rect(fill: gradient.linear(..))}` /// `{rect(fill: gradient.linear(..))}`
@ -38,7 +38,7 @@ use crate::syntax::{Span, Spanned};
/// ///
/// Gradients are not currently supported on text. /// Gradients are not currently supported on text.
/// ///
/// ## Relativeness /// # Relativeness
/// The location of the `{0%}` and `{100%}` stops is dependant on the dimensions /// The location of the `{0%}` and `{100%}` stops is dependant on the dimensions
/// of a container. This container can either be the shape they are painted on, /// of a container. This container can either be the shape they are painted on,
/// or to the closest container ancestor. This is controlled by the `relative` /// or to the closest container ancestor. This is controlled by the `relative`
@ -54,7 +54,7 @@ use crate::syntax::{Span, Spanned};
/// [`rotate`]($rotate) will not affect the parent of a gradient, but a /// [`rotate`]($rotate) will not affect the parent of a gradient, but a
/// [`grid`]($grid) will. /// [`grid`]($grid) will.
/// ///
/// ## Color spaces and interpolation /// # Color spaces and interpolation
/// Gradients can be interpolated in any color space. By default, gradients are /// Gradients can be interpolated in any color space. By default, gradients are
/// interpolated in the [Oklab]($color.oklab) color space, which is a /// interpolated in the [Oklab]($color.oklab) color space, which is a
/// [perceptually uniform](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html) /// [perceptually uniform](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html)
@ -78,34 +78,33 @@ use crate::syntax::{Span, Spanned};
/// | [HSV]($color.hsv) | *No* | /// | [HSV]($color.hsv) | *No* |
/// ///
/// ```example /// ```example
/// #set text(fill: white) /// >>> #set text(fill: white, font: "IBM Plex Sans", 8pt)
/// #set block(spacing: 0pt) /// >>> #set block(spacing: 0pt)
///
/// #let spaces = ( /// #let spaces = (
/// ("Oklab", color.oklab), /// ("Oklab", color.oklab),
/// ("sRGB", color.rgb),
/// ("linear-RGB", color.linear-rgb), /// ("linear-RGB", color.linear-rgb),
/// ("sRGB", color.rgb),
/// ("CMYK", color.cmyk), /// ("CMYK", color.cmyk),
/// ("Grayscale", color.luma),
/// ("HSL", color.hsl), /// ("HSL", color.hsl),
/// ("HSV", color.hsv), /// ("HSV", color.hsv),
/// ("Grayscale", color.luma),
/// ) /// )
/// ///
/// #for (name, space) in spaces { /// #for (name, space) in spaces {
/// block( /// block(
/// width: 100%, /// width: 100%,
/// height: 10pt, /// inset: 4pt,
/// fill: gradient.linear( /// fill: gradient.linear(
/// red, /// red,
/// blue, /// blue,
/// space: space /// space: space,
/// ), /// ),
/// name /// strong(upper(name)),
/// ) /// )
/// } /// }
/// ``` /// ```
/// ///
/// ## Direction /// # Direction
/// Some gradients are sensitive to direction. For example, a linear gradient /// Some gradients are sensitive to direction. For example, a linear gradient
/// has an angle that determines the its direction. Typst uses a clockwise /// has an angle that determines the its direction. Typst uses a clockwise
/// angle, with 0° being from left-to-right, 90° from top-to-bottom, 180° from /// angle, with 0° being from left-to-right, 90° from top-to-bottom, 180° from
@ -122,14 +121,7 @@ use crate::syntax::{Span, Spanned};
/// ) /// )
/// ``` /// ```
/// ///
/// ## Note on compatibility /// # Presets
/// Gradients in [{`rotate`}]($rotate) blocks may not be rendered correctly by
/// [PDF.js](https://mozilla.github.io/pdf.js/), the PDF reader bundled with
/// Firefox. This is due to an issue in PDF.js, you can find the issue as reported
/// on [their GitHub](https://github.com/mozilla/pdf.js/issues/17065).
///
/// ## Presets
///
/// You can find the full list of presets in the documentation of [`color`]($color), /// You can find the full list of presets in the documentation of [`color`]($color),
/// below is an overview of them. Note that not all presets are suitable for data /// below is an overview of them. Note that not all presets are suitable for data
/// visualization and full details and relevant sources can be found in the /// visualization and full details and relevant sources can be found in the