From 011e9af3a6f9d5e09186ca1a81d80ea5295066cd Mon Sep 17 00:00:00 2001
From: Andrew Voynov <andrewvoynov.b@gmail.com>
Date: Tue, 28 Jan 2025 03:58:11 +0300
Subject: [PATCH] docs(ratio): added multiplication examples

---
 crates/typst-library/src/layout/ratio.rs | 26 +++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/crates/typst-library/src/layout/ratio.rs b/crates/typst-library/src/layout/ratio.rs
index e54a7f956..0fe7f8075 100644
--- a/crates/typst-library/src/layout/ratio.rs
+++ b/crates/typst-library/src/layout/ratio.rs
@@ -30,9 +30,33 @@ use crate::foundations::{repr, ty, Repr};
 /// See [relative length]($relative) for more details.
 ///
 /// However, within your own code, you can use ratios as you'd like. You can
-/// multiply ratio by ratio, [length], [relative length](relative), [angle],
+/// multiply ratio by ratio, [length], [relative length]($relative), [angle],
 /// [int], [float], and [fraction].
 ///
+/// ```example
+/// #ratio: #(27% * 10%) \
+/// #length: #(27% * 100pt) \
+/// #relative: #(27% * (10% + 100pt)) \
+/// #angle: #(27% * 100deg) \
+/// #int: #(27% * 2) \
+/// #float: #(27% * 0.37037) \ // Some rounding is happening.
+/// #fraction: #(27% * 3fr)
+///
+/// #table(
+///   columns: 2,
+///   align: (right, left),
+///   inset: (x: 2pt),
+///   table.vline(x: 1, stroke: none),
+///   [#ratio:], [#(27% * 10%)],
+///   [#length:], [#(27% * 100pt)],
+///   [#relative:], [#(27% * (10% + 100pt))],
+///   [#angle:], [#(27% * 100deg)],
+///   [#int:], [#(27% * 2)],
+///   [#float:], [#(27% * 0.37037)], // Some rounding is happening.
+///   [#fraction:], [#(27% * 3fr)],
+/// )
+/// ```
+///
 /// # Example
 /// ```example
 /// #set align(center)