feat(typography): New mixin to set exact baseline height of text elem…

…ents. (#3083)
material-components · Jul 25, 2018 · dd3817a · dd3817a
1 parent 42c8729
commit dd3817a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/demos/typography.html b/demos/typography.html
@@ -30,6 +30,10 @@
         padding: 24px;
         border: 1px solid #ddd;
       }
+
+       .demo-typography--heading-baseline {
+         margin-left: 24px;
+       }
     </style>
   </head>
   <body class="mdc-typography">
@@ -77,6 +81,17 @@ <h6 class="mdc-typography--subtitle2">Subtitle 2</h6>
         <div><span class="mdc-typography--overline">Overline text</span></div>
 
       </section>
+
+      <h6 class="mdc-typography--headline6 demo-typography--heading-baseline">Baseline</h6>
+      <section class="demo-typography--section-baseline">
+        <h2 class="demo-typography__title mdc-typography--headline6">Our Changing Planet</h2>
+        <h3 class="demo-typography__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
+        <div class="demo-typography__body mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div>
+
+        <line class="demo-typography-line-1">+34px</line>
+        <line class="demo-typography-line-2">+22px</line>
+        <line class="demo-typography-line-3">+28px</line>
+      </section>
     </main>
   </body>
 </html>
diff --git a/demos/typography.scss b/demos/typography.scss
@@ -15,3 +15,56 @@
 //
 
 @import "./common";
+@import "../packages/mdc-typography/mixins";
+
+$ruler-color: #FD2549;
+
+.demo-typography--section-baseline {
+  position: relative;
+  margin: 24px;
+  padding: 0 24px 24px 24px;
+  border: 1px solid #ddd;
+  max-width: 350px;
+}
+
+.demo-typography__title {
+  @include mdc-typography-baseline-top(34px);
+  @include mdc-typography-baseline-bottom(22px);
+}
+
+.demo-typography__subtitle {
+  @include mdc-typography-baseline-top(22px);
+  @include mdc-typography-baseline-bottom(28px);
+
+  @include mdc-theme-prop(color, text-secondary-on-background);
+}
+
+.demo-typography__body {
+  @include mdc-typography-baseline-top(28px);
+  @include mdc-theme-prop(color, text-secondary-on-background);
+}
+
+.demo-typography-line-1,
+.demo-typography-line-2,
+.demo-typography-line-3 {
+  position: absolute;
+  border-top: 1px solid $ruler-color;
+  width: 100%;
+  left: 0;
+  right: 0;
+  color: $ruler-color;
+  font-size: 10px;
+  text-align: right;
+}
+
+.demo-typography-line-1 {
+  top: 34px;
+}
+
+.demo-typography-line-2 {
+  top: calc(34px + 22px);
+}
+
+.demo-typography-line-3 {
+  top: calc(34px + 22px + 28px);
+}
diff --git a/packages/mdc-typography/README.md b/packages/mdc-typography/README.md
@@ -97,6 +97,8 @@ Mixin | Description
 `mdc-typography-base` | Sets the font to Roboto
 `mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto
 `mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
+`mdc-typography-baseline-top($distance)` | Sets the baseline height of a text element from top.
+`mdc-typography-baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `mdc-typography-baseline-top` when setting baseline distance to following text element.
 
 > **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.
 

diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
@@ -40,3 +40,28 @@
   white-space: nowrap;
   overflow: hidden;
 }
+
+@mixin mdc-typography-baseline-top($distance) {
+  margin-top: 0;
+  line-height: normal;
+
+  &::before {
+    @include mdc-typography-baseline-strut_($distance, 0);
+  }
+}
+
+@mixin mdc-typography-baseline-bottom($distance) {
+  margin-bottom: -1 * $distance;
+
+  &::after {
+    @include mdc-typography-baseline-strut_($distance, -1 * $distance);
+  }
+}
+
+@mixin mdc-typography-baseline-strut_($distance, $vertical-align) {
+  display: inline-block;
+  width: 0;
+  height: $distance;
+  content: "";
+  vertical-align: $vertical-align;
+}