From 729d70387e2e25b34f37cea85873082c7ec64788 Mon Sep 17 00:00:00 2001
From: Fuqiao Xue <xfq@w3.org>
Date: Fri, 4 Sep 2020 15:35:48 +0800
Subject: [PATCH] Mention HTML/CSS Ruby (#482)

Fix #466.
---
 data/css-ruby.json   | 20 ++++++++++++++++++++
 data/html.json       |  8 ++++++++
 mobile/graphics.html |  1 +
 3 files changed, 29 insertions(+)
 create mode 100644 data/css-ruby.json

diff --git a/data/css-ruby.json b/data/css-ruby.json
new file mode 100644
index 00000000..c700153a
--- /dev/null
+++ b/data/css-ruby.json
@@ -0,0 +1,20 @@
+{
+  "url": "https://www.w3.org/TR/css-ruby-1/",
+  "features": {
+    "ruby-align": {
+      "url": "https://www.w3.org/TR/css-ruby-1/#ruby-align-property",
+      "title": "The ruby-align property",
+      "impl": {
+        "mdn": "css.properties.ruby-align"
+      }
+    },
+
+    "ruby-position": {
+      "url": "https://www.w3.org/TR/css-ruby-1/#rubypos",
+      "title": "The ruby-position property",
+      "impl": {
+        "mdn": "css.properties.ruby-position"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/data/html.json b/data/html.json
index 572cdcc3..b439640b 100644
--- a/data/html.json
+++ b/data/html.json
@@ -39,6 +39,14 @@
         "mdn": "api.CanvasRenderingContext2D",
         "webkitstatus": null
       }
+    },
+
+    "ruby": {
+      "url": "https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-ruby-element",
+      "title": "The ruby element",
+      "impl": {
+        "caniuse": "ruby"
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/mobile/graphics.html b/mobile/graphics.html
index b9043bdc..d77849f3 100644
--- a/mobile/graphics.html
+++ b/mobile/graphics.html
@@ -25,6 +25,7 @@ <h2>Well-deployed technologies</h2>
           <p>By default, the box model in CSS specifies that any padding and border of an element are to be laid out and drawn outside of the specified width and height for the element. The effective external size of a box thus varies with the padding and border used, which complicates the design of responsive layouts where developers want to vary box sizes based on the size of the screen. The <code>border-box</code> value of the <a data-featureid="css-ui-box-sizing"><code>box-sizing</code> property</a> tells the user agent to lay out and draw padding and border inside the specified width and height for the element, which usually simplifies the design of responsive layouts.</p>
           <p><a data-featureid="css-flexbox">CSS Flexbox</a> and <a data-featureid="css-grid-1">CSS Grid</a> introduce two new layout modes, designed for laying out more complex applications. Notably, they make it possible to preserve a clear separation between the content itself (HTML, SVG) and its layout by allowing re-ordering of elements on screen, without having to change the underlying HTML. This is particularly relevant on mobile devices where the user interface and user experience need to be adjusted to fit the screen and available interaction mechanisms (see also <a href="adaptation.html">Device Adaptation</a>).</p>
           <p>Flexbox focuses on space distribution within an axis, and uses a simpler bottom-up approach to layout, while Grid enforces 2-dimensional alignment, and uses a top-down approach to layout. It is expected that both will be valuable and complementary tools for web developers.</p>
+          <p>Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. The HTML <a data-featureid="html/ruby">ruby</a> element allows text to be marked with ruby annotations. The <a data-featureid="css-ruby/ruby-align">ruby-align</a>, <a data-featureid="css-ruby/ruby-position">ruby-position</a>, and other properties defined in <a href="https://www.w3.org/TR/css-ruby-1/">CSS Ruby</a> provide a way to control the rendering of the HTML <a data-featureid="html/ruby">ruby</a> element.</p>
         </div>
         <div data-feature="Downloadable fonts">
           <p>Fonts play also an important role in building appealing graphical interfaces, but mobile devices are in general distributed with only a limited set of fonts. <a data-featureid="woff2">WOFF</a> (Web Open Font Format) addresses that limitation by making it easy to use fonts that are automatically downloaded through style sheets, while keeping the size of the downloaded fonts limited to what is actually needed to render the interface. WOFF is particularly friendly to mobile devices, thanks to a font data preprocessing and optimization step that reduces redundancy of font data structures, and a dedicated entropy coding scheme for compression that does not require excessive CPU or memory usage for decoding, even on lower-end mobile devices.</p>