docs: Add some more images

Add a visual example of bidi reordering.

9 files changed, 22 insertions, 0 deletions

diff --git a/docs/bidi-annotate-dark.png b/docs/bidi-annotate-dark.png
new file mode 100644
index 00000000..d462f7f4
--- /dev/null
+++ b/docs/bidi-annotate-dark.png
diff --git a/docs/bidi-annotate-light.png b/docs/bidi-annotate-light.png
new file mode 100644
index 00000000..9e23f273
--- /dev/null
+++ b/docs/bidi-annotate-light.png
diff --git a/docs/bidi-annotate.png b/docs/bidi-annotate.png
new file mode 100644
index 00000000..79756f7b
--- /dev/null
+++ b/docs/bidi-annotate.png
diff --git a/docs/bidi-input-dark.png b/docs/bidi-input-dark.png
new file mode 100644
index 00000000..586d64ce
--- /dev/null
+++ b/docs/bidi-input-dark.png
diff --git a/docs/bidi-input-light.png b/docs/bidi-input-light.png
new file mode 100644
index 00000000..932b1d32
--- /dev/null
+++ b/docs/bidi-input-light.png
diff --git a/docs/bidi-input.png b/docs/bidi-input.png
new file mode 100644
index 00000000..fc1892ec
--- /dev/null
+++ b/docs/bidi-input.png
diff --git a/docs/meson.build b/docs/meson.build
index a29f6578..21230ddd 100644
--- a/docs/meson.build
+++ b/docs/meson.build
@@ -26,6 +26,10 @@ pango_content_files = [
   'm-west.png',
   'm-north.png',
   'm-east.png',
+  'bidi-input-light.png',
+  'bidi-input-dark.png',
+  'bidi-annotate-light.png',
+  'bidi-annotate-dark.png',
 ]
 
 doc_conf = configuration_data()
diff --git a/docs/pango.toml.in b/docs/pango.toml.in
index 4c51b9aa..95143360 100644
--- a/docs/pango.toml.in
+++ b/docs/pango.toml.in
@@ -85,4 +85,8 @@ content_images = [
   "m-west.png",
   "m-north.png",
   "m-east.png",
+  "bidi-input-light.png",
+  "bidi-input-dark.png",
+  "bidi-annotate-light.png",
+  "bidi-annotate-dark.png",
 ]
diff --git a/docs/pango_bidi.md b/docs/pango_bidi.md
index 5d418422..996e9781 100644
--- a/docs/pango_bidi.md
+++ b/docs/pango_bidi.md
@@ -14,6 +14,20 @@ control over bidirectional setting of text, Pango provides APIs such as
 [func@unichar_direction], [func@find_base_dir], [func@get_mirror_char]
 or [func@Pango.BidiType.for_unichar].
 
+Here is an example for mixed-direction text (shown in logical order):
+
+<picture>
+  <source srcset="bidi-input-dark.png" media="(prefers-color-scheme: dark)">
+  <img alt="mixed-direction text, logical order" src="bidi-input-light.png">
+</picture>
+
+Pango reorders the text according to the direction of the runs:
+
+<picture>
+  <source srcset="bidi-annotate-dark.png" media="(prefers-color-scheme: dark)">
+  <img alt="mixed-direction text, visual order" src="bidi-annotate-light.png">
+</picture>
+
 # Vertical Text
 
 Pango is not only capable of vertical text layout, it can handle mixed vertical