add glossing.css, update README (still incomplete)

README.md

@@ -1,3 +1,20 @@
 # glossing.css
 
-A minimalist CSS library for linguistic glossing.
+A minimalist CSS library for linguistic glossing.
+
+This stylesheet integrates best with [pandoc Markdown](https://pandoc.org/MANUAL.html) with extension `table_captions` enabled. Yes, we use `<table>` to represent glossings in HTML, because glossings are literally data. 
+
+With pandoc extension `table_captions`, we take contents generated into  `<caption>` as the line for translation in linguistic glossing, which is apparently more reasonable than using table cell with `colspan` attribute. 
+
+## How to use
+
+*todo*
+
+## Note
+
+We used selector `:is()`, if you need you may change that into more primitive expressions. 
+
+## To-dos
+
+- minimize to a `glossing.min.css`
+

glossing.css

@@ -0,0 +1,57 @@
+.glossing {
+  white-space: nowrap;
+}
+.glossing u,
+.glossing em {
+  text-decoration: none;
+  font-size: normal;
+  font-variant: small-caps;
+}
+.glossing :is(table, th, tr, td, caption, thead, tbody) {
+  margin: 0;
+  border: 0;
+  background-color: transparent !important;
+  font-style: normal;
+  font-weight: normal;
+  text-align: left;
+}
+.glossing :is(td, caption) {
+  padding: .1em .4em;
+}
+.glossing caption {
+  caption-side: bottom;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+/* optional behaviors */
+.glossing tr:nth-child(1) {
+  font-style: italic;
+}
+.glossing.noital tr:nth-child(1), 
+.glossing.ital2 tr:nth-child(1) {
+  font-style: normal;
+}
+.glossing.ital2 tr:nth-child(2) {
+  font-style: italic;
+}
+
+.glossing.quot1 caption::before {
+  content: "‘"
+}
+.glossing.quot1 caption::after {
+  content: "’"
+}
+.glossing.quot2 caption::before {
+  content: "“"
+}
+.glossing.quot2 caption::after {
+  content: "”"
+}
+
+.glossing.fontsize :is(tr:nth-child(1), caption) {
+  font-size: 1.1em;
+}
+.glossing.fontsize.ital2 :is(tr:nth-child(2), caption) {
+  font-size: 1.1em
+}