From 873f843a77dc667c0a03e7af80e41f497cbde7a9 Mon Sep 17 00:00:00 2001
From: Josh McKinney <joshka@users.noreply.github.com>
Date: Mon, 26 Feb 2024 00:01:17 -0800
Subject: [PATCH] docs: add pixel height example to main readme

---
 .markdownlint.yaml |  2 ++
 README.md          | 25 ++++++++++++++++++++-----
 src/lib.rs         | 21 ++++++++++++++++++---
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/.markdownlint.yaml b/.markdownlint.yaml
index b121e63..1e42fce 100644
--- a/.markdownlint.yaml
+++ b/.markdownlint.yaml
@@ -1,6 +1,8 @@
 no-inline-html:
   allowed_elements:
     - br
+    - details
+    - summary
 line-length:
   line_length: 100
   heading_line_length: 100
diff --git a/README.md b/README.md
index d8a3322..644d6e7 100644
--- a/README.md
+++ b/README.md
@@ -24,10 +24,9 @@ cargo add ratatui tui-big-text
 
 Create a [`BigText`] widget using [`BigText::builder`] and pass it to [`render_widget`] to
 render be rendered. The builder allows you to customize the [`Style`] of the widget and the
-[`PixelSize`] of the glyphs. The [`PixelSize`] can be used to control how many character cells
-are used to represent a single pixel of the 8x8 font.
+[`PixelSize`] of the glyphs.
 
-## Example
+## Examples
 
 ```rust
 use anyhow::Result;
@@ -49,6 +48,22 @@ fn render(frame: &mut Frame) -> Result<()> {
 }
 ```
 
+The [`PixelSize`] can be used to control how many character cells are used to represent a single
+pixel of the 8x8 font. It has six variants:
+
+- `Full` (default) - Each pixel is represented by a single character cell.
+- 'HalfHeight' - Each pixel is represented by half the height of a character cell.
+- 'HalfWidth' - Each pixel is represented by half the width of a character cell.
+- 'Quadrant' - Each pixel is represented by a quarter of a character cell.
+- 'ThirdHeight' - Each pixel is represented by a third of the height of a character cell.
+- 'Sextant' - Each pixel is represented by a sixth of a character cell.
+
+<details><summary>Pixel Size Example</summary>
+
+![Pixel Size](https://vhs.charm.sh/vhs-2nLycKO16vHzqg3TxDNvq4.gif)
+
+</details>
+
 [tui-big-text]: https://crates.io/crates/tui-big-text
 [Ratatui]: https://crates.io/crates/ratatui
 [font8x8]: https://crates.io/crates/font8x8
@@ -67,9 +82,9 @@ Copyright (c) 2023 Josh McKinney
 
 This project is licensed under either of
 
-* Apache License, Version 2.0
+- Apache License, Version 2.0
    ([LICENSE-APACHE](LICENSE-APACHE) or <http://www.apache.org/licenses/LICENSE-2.0>)
-* MIT license
+- MIT license
    ([LICENSE-MIT](LICENSE-MIT) or <http://opensource.org/licenses/MIT>)
 
 at your option.
diff --git a/src/lib.rs b/src/lib.rs
index ac5ec90..a6b1624 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -13,10 +13,9 @@
 //!
 //! Create a [`BigText`] widget using [`BigText::builder`] and pass it to [`render_widget`] to
 //! render be rendered. The builder allows you to customize the [`Style`] of the widget and the
-//! [`PixelSize`] of the glyphs. The [`PixelSize`] can be used to control how many character cells
-//! are used to represent a single pixel of the 8x8 font.
+//! [`PixelSize`] of the glyphs.
 //!
-//! # Example
+//! # Examples
 //!
 //! ```rust
 //! use anyhow::Result;
@@ -38,6 +37,22 @@
 //! }
 //! ```
 //!
+//! The [`PixelSize`] can be used to control how many character cells are used to represent a single
+//! pixel of the 8x8 font. It has six variants:
+//!
+//! - `Full` (default) - Each pixel is represented by a single character cell.
+//! - 'HalfHeight' - Each pixel is represented by half the height of a character cell.
+//! - 'HalfWidth' - Each pixel is represented by half the width of a character cell.
+//! - 'Quadrant' - Each pixel is represented by a quarter of a character cell.
+//! - 'ThirdHeight' - Each pixel is represented by a third of the height of a character cell.
+//! - 'Sextant' - Each pixel is represented by a sixth of a character cell.
+//!
+//! <details><summary>Pixel Size Example</summary>
+//!
+//! ![Pixel Size](https://vhs.charm.sh/vhs-2nLycKO16vHzqg3TxDNvq4.gif)
+//!
+//! </details>
+//!
 //! [tui-big-text]: https://crates.io/crates/tui-big-text
 //! [Ratatui]: https://crates.io/crates/ratatui
 //! [font8x8]: https://crates.io/crates/font8x8