articles/ruby/styling: Rewrite for publication review

articles/ruby/styling-data/local.css

@@ -230,3 +230,113 @@ figcaption .demolink {
 	text-align: right;
 	margin: 0;
 	}
+
+
+
+pre.language-css, pre.language-html {
+    margin-inline-start: 0 !important;
+    margin-inline-end: 0;
+    }
+
+.vertical {
+    writing-mode: vertical-rl;
+    }
+.browser_output {
+    font-size: 1.15rem;
+    border: 1px solid #ccc;
+    padding: 1rem;
+    line-height: 1.4;
+    margin-inline-start: 7.5%;
+    margin-inline-end: 32%;
+    }
+.browser_output p {
+    margin: 0;
+    }
+.browser_output_title {
+    font-size: .8rem;
+    font-weight: bold;
+    }
+.browser_output p:first-of-type {
+	margin-block-end: .5rem;
+	}
+
+
+
+
+/* STYLING FOR EXAMPLES */
+
+
+
+#position_under ruby { ruby-position: under; }
+#out_position_over ruby { ruby-position: over; }
+
+
+
+#out_bopomofo_position ruby { ruby-position: inter-character; }
+
+#out_double_position ruby { ruby-position: over; }
+#out_double_position rtc { ruby-position: under; }
+
+#out_double_position2 ruby { ruby-position: under; }
+#out_double_position2 ruby ruby { ruby-position: over; }
+
+#out_inline_interleaved ruby { font-size: 1.4rem; }
+#out_inline_interleaved rt { display: inline; font-size: 1em; }
+#out_inline_interleaved rt::before { content: '（'; }
+#out_inline_interleaved rt::after { content: '）'; }
+
+#out_inline_tabular ruby { font-size: 1.4rem; }
+#out_inline_tabular rt { display: inline; font: inherit; }
+#out_inline_tabular rtc::before { content: "（"; }
+#out_inline_tabular rtc::after  { content: "）"; } 
+#out_inline_tabular rb  + rt::before, rtc + rt::before { content: "（"; } 
+#out_inline_tabular rb ~ rt:last-child::after  { content: "）"; } 
+#out_inline_tabular rt + rb::before  { content: "）"; } 
+#out_inline_tabular rt + rtc::before { content: "）（"; }
+
+
+#out_aligning_ends ruby { ruby-align: start; }
+#out_aligning_ends ruby:first-of-type rb { border-inline-end: 1px solid red; }
+#out_aligning_ends ruby:first-of-type rt { border-inline-end: 1px solid red; }
+
+#out_aligning_centered ruby { ruby-align: center; }
+#out_aligning_centered ruby:first-of-type rb { border-inline-end: 1px solid red; }
+#out_aligning_centered ruby:first-of-type rt { border-inline-end: 1px solid red; }
+
+#out_aligning_space_between ruby { ruby-align: space-between; }
+#out_aligning_space_between ruby:first-of-type rb { border-inline-end: 1px solid red; }
+#out_aligning_space_between ruby:first-of-type rt { border-inline-end: 1px solid red; }
+
+#out_aligning_space_around ruby { ruby-align: space-around; }
+#out_aligning_space_around ruby:first-of-type rb { border-inline-end: 1px solid red; }
+#out_aligning_space_around ruby:first-of-type rt { border-inline-end: 1px solid red; }
+
+#out_aligning_pinyin ruby { ruby-align: space-between; }
+#out_aligning_pinyin ruby:first-of-type rb { border-inline-end: 1px solid red; }
+#out_aligning_pinyin ruby:first-of-type rt { border-inline-end: 1px solid red; }
+
+
+
+
+.browser_output h2 {
+    margin-block-start: 1rem;
+    }
+
+[lang=ber] {
+	font-family: 'Noto Sans Tifinagh WF';
+	}
+
+#out_bdo_mirrored bdo {
+    transform: rotateY(180deg); display: inline-block;
+    }
+#out_styled_rlo .rlo {
+    unicode-bidi: bidi-override; direction: rtl; text-align: right;
+    }
+#out_styled_rlo_bidi .rlo { unicode-bidi: bidi-override; direction: rtl; text-align: right; }
+#out_styled_rlo_bidi .lro { unicode-bidi: bidi-override; direction: ltr; }
+#out_mirrored bdo { transform: rotateY(180deg); display: inline-block; }
+#out_styling_bdo .rlo { unicode-bidi: bidi-override; direction: rtl; text-align: right; }
+#out_styling_bidi .rlo { unicode-bidi: bidi-override; direction: rtl; text-align: right; }
+#out_styling_bidi .lro { unicode-bidi: bidi-override; direction: ltr; }
+
+