its-swiss 0.7.0 → 0.7.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a5ab32d42d182f1c9e0c8efa403cd4f90857e9c8c1b955ba31023330b1095a8
-  data.tar.gz: 0f39bbc46d60b4374c1334b644c28e4d061cc9778b08b2f9a474cbb4aa824341
+  metadata.gz: 7f884ebf4471bd9c1bdc232a35cf327949466b3db98748a6bb008f985314e091
+  data.tar.gz: d8a1e3b75d21f52e96850a57adf3dcbc72242638f9f7d62fe71126bf8ffa5272
 SHA512:
-  metadata.gz: 80cff5ca6de7fa9aa649fcf1146e78b9315d61531ef4968875e895db0abd8bd636fd07b33df90b41b38a6374a530945459e4032534c303f599774abd347182c3
-  data.tar.gz: 3090006b7c520d07a88c2527a73b18f94cac3a484d225c393d88e8956a1bb8af559e26dafc8bc384922659892f0577638fa9174d2c03a168b23e43fb8f7d4171
+  metadata.gz: 5157d8c0cd8ad7db0db4025199d76ce4888ed2ad85d4ffb69a4427c97539482f646f56fe1fb274c831cf9f4d4a99a02185e9eb230cbc6516294bb805f631f815
+  data.tar.gz: 7a2ca8413c7cfdaa998a033bdeb9cae176cf7487cdab8af8162b784d01006f264c835a092a11f48bff1c549459dd61166259b6ca9f73771cd3241d0bbfc1430c

data/CHANGELOG.md

@@ -2,10 +2,31 @@
 
 Semver. Consumers pin `~> 0.1`.
 
-## Unreleased
+## 0.7.2 — 2026-09-04
+
+### Changed
+
+- **A control's text sits on its rule.** 0.7.1 took the text off the faces
+  and left it on the first of the control's two lines, a whole line above
+  the rule. It is set on the second line now, the one the rule closes, so
+  the type stands on its rule; the first line is air under the label. The
+  box is still two lines and still on the grid.
+
+## 0.7.1 — 2026-09-04
 
 ### Fixed
 
+- **A control's text was clipped at the rule.** The faces put every
+  baseline on the under edge of its line by giving the type no descent, and
+  a browser centres an input's text in a box of its own and clips it there
+  — so with `font: inherit` every descender in a field, a select or a
+  textarea was cut off. A control's text is now set in `--font-family`
+  itself, with the font's own metrics, on one line inside the two-line box:
+  the box stays on the grid and the type is deliberately off the baseline,
+  the way a button's label is. `its_swiss_typeface` takes `family:` and
+  declares the typeface under its own name as well, so that `--font-family`
+  resolves to it.
+
 - **A pinned specimen stopped existing.** Pages replaces the whole site on
   every deploy, so a version-stamped page survives only if the run writes it
   again. The step meant to carry them forward read them back off the live
@@ -20,7 +41,7 @@ Semver. Consumers pin `~> 0.1`.
   from itself. `0.6.0.html` is restored there, rendered from the 0.6.0 commit
   by that version's own `bin/specimen`.
 
-## 0.7.0 — Unreleased
+## 0.7.0 — 2026-09-04
 
 Every baseline on the grid, in every browser, whatever the font.
 

data/README.md

@@ -171,17 +171,25 @@ be corrected twice. Plain text dropped straight into a `<footer>` or a `<div>`
 is in step and, in Safari, off the baseline; put it in a paragraph. The shell
 does, for the `:footer` slot.
 
-A control is two lines: one the type is set on, one the rule closes, with the
-rule's width taken out of the second. A button is a box, two lines tall with
+A control is two lines: a line of air under the label, then the line the
+type is set on, which the rule closes, with the rule's width taken out of the
+first — so the type stands on its rule the way a line of handwriting stands
+on a ruled page. A button is a box, two lines tall with
 its label centred in it, and its label's baseline is the one baseline in the
 library that is not on a line — on purpose, since a label set on the second
 line of a two-line box reads as a field with a rule under it. Its keyline is
 an inset shadow rather than a border, so the box is the label's line and two
-paddings and nothing else. A control's own text is the one thing neither
-mechanism reaches in Safari: an input, a select or a textarea cannot be
-trimmed, and with the faces ignored its text sits where the font puts it, a
-few pixels above the line. The box is on the grid; the type in it is the
-font's until WebKit honours the descriptors.
+paddings and nothing else.
+
+A control's own text — an input, a select, a textarea — is the other run of
+type the library takes off the baseline, and it does so on purpose too. A
+browser sets that text in a box of its own, centres it there and clips it
+there, and on a face with no descent every descender was cut off at the
+rule. So the text is set in `--font-family` itself, with the font's own
+metrics, on the line the rule closes: the box is on the grid, the line is
+the ladder's, and where the baseline falls inside the line is the font's. Which means the typeface has to exist under its own name as well as
+under the faces; `its_swiss_typeface` declares it there when given
+`family:`, and `--font-family` names it.
 
 #### Your own typeface
 
@@ -191,6 +199,7 @@ it:
 ```erb
 <%= its_swiss_typeface regular: "inter-regular.woff2", bold: "inter-bold.woff2" %>
 <%= its_swiss_typeface variable: "inter.woff2", mono: "jetbrains-mono.woff2" %>
+<%= its_swiss_typeface variable: "inter.woff2", family: "Inter" %>
 ```
 
 Put it after the library's stylesheets. The declarations are unlayered, and a

data/app/assets/stylesheets/its_swiss/components.css

@@ -273,14 +273,25 @@
     border-bottom: var(--rule-hair) solid var(--ink);
     background: transparent;
     color: inherit;
-    font: inherit;
-    /* No padding above it: the rule belongs under the text, not a line's
-       height below it, or the label reads as belonging to nothing. */
+    /* The one run of type in the library that is taken off the baseline on
+       purpose. A control's text is not in the document: the browser sets it
+       in a box of its own, centres it there and clips it there, and on a
+       face with no descent — the faces are what put every other baseline on
+       the under edge of its line — every descender was cut off at the rule.
+       So the type is set in the typeface itself, with the font's own
+       metrics, on one line. The line is the ladder's and so is the box; only
+       where the baseline falls inside the line is the font's. */
+    font-family: var(--font-family);
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: var(--line);
+    /* A control is two lines of box, and the text sits on the second: the
+       line the rule closes, so the type stands on its rule the way a line of
+       handwriting stands on a ruled page, and the rule is on the grid. The
+       first line is air between the label and the text — the rule's width
+       comes out of it, so the box stays two lines exactly. */
     block-size: var(--line-2);
-    /* The rule sits a whole line under the text rather than a few pixels
-       under it. A control is two lines of box: one the text is set on, one
-       the rule closes. */
-    padding-block: 0 calc(var(--line) - var(--rule-hair));
+    padding-block: calc(var(--line) - var(--rule-hair)) 0;
   }
 
   .field textarea {

data/app/assets/stylesheets/its_swiss/type.css

@@ -202,8 +202,9 @@
      trimmed through its first and last child and would be corrected twice.
      A list item or a definition holds either, so they are trimmed only when
      they hold text. A control's own text — an input, a select, a textarea —
-     cannot be trimmed, and in a browser without the faces it sits where the
-     font puts it.
+     is not trimmed and not on a face: components.css sets it in the typeface
+     itself, on one line, because a browser centres it in a box of its own
+     and clips it there.
 
      The correction is written for the browser that uses it. WebKit trims a
      line to its cap height rounded to a whole pixel while its cap unit is

data/app/helpers/its_swiss/application_helper.rb

@@ -40,21 +40,29 @@ module ItsSwiss
     #
     #   <%= its_swiss_typeface regular: "inter-regular.woff2", bold: "inter-bold.woff2" %>
     #   <%= its_swiss_typeface variable: "inter.woff2", mono: "jetbrains-mono.woff2" %>
+    #   <%= its_swiss_typeface variable: "inter.woff2", family: "Inter" %>
+    #
+    # family: declares the same files under the font's own name as well, with
+    # the font's own metrics. A control's text is set in --font-family rather
+    # than on a face, so an application that names its typeface there needs
+    # the name to resolve — or its fields are set in the machine's grotesque
+    # while the page around them is set in its own.
     #
     # Unlayered, which is how it wins: a name defined outside a layer beats
     # the same name defined inside one, the way the application's rules beat
     # the library's. Put it after the library's stylesheets all the same, for
     # a browser that resolves a name by order rather than by layer.
-    def its_swiss_typeface(regular: nil, bold: nil, variable: nil, mono: nil)
+    def its_swiss_typeface(regular: nil, bold: nil, variable: nil, mono: nil, family: nil)
       raise ArgumentError, "a regular file or a variable one" unless regular || variable
       raise ArgumentError, "a variable file carries both weights" if variable && (regular || bold)
 
       weights = variable ? { "100 900" => variable } : { "400" => regular, "700" => bold }.compact
 
-      faces = ItsSwiss::FACES.flat_map do |family, ratio|
-        weights.map { |weight, file| its_swiss_face(family, file, ratio, weight: weight) }
+      faces = ItsSwiss::FACES.flat_map do |family_name, ratio|
+        weights.map { |weight, file| its_swiss_face(family_name, file, ratio, weight: weight) }
       end
-      faces += ItsSwiss::MONO_FACE.map { |family, ratio| its_swiss_face(family, mono, ratio) } if mono
+      faces += ItsSwiss::MONO_FACE.map { |family_name, ratio| its_swiss_face(family_name, mono, ratio) } if mono
+      faces += weights.map { |weight, file| its_swiss_face(family, file, nil, weight: weight) } if family
 
       tag.style(faces.join("\n").html_safe) # rubocop:disable Rails/OutputSafety -- every value is a number or a JSON-quoted path
     end
@@ -107,18 +115,20 @@ module ItsSwiss
 
     FONT_FORMATS = { ".woff2" => "woff2", ".woff" => "woff", ".ttf" => "truetype", ".otf" => "opentype" }.freeze
 
+    # With a ratio, a face whose ascent is that ratio and whose descent is
+    # nothing; without one, the font under its own name with its own metrics.
     def its_swiss_face(family, file, ratio, weight: nil)
       source = "url(#{asset_path(file).to_json})"
       source += %( format("#{FONT_FORMATS[File.extname(file)]}")) if FONT_FORMATS[File.extname(file)]
-      ascent = (ratio * 100).to_f.round(4).to_s.sub(/\.0\z/, "")
+      ascent = (ratio * 100).to_f.round(4).to_s.sub(/\.0\z/, "") if ratio
 
       [ "@font-face {",
         "  font-family: #{family.to_json};",
         ("  font-weight: #{weight};" if weight),
         "  src: #{source};",
-        "  ascent-override: #{ascent}%;",
-        "  descent-override: 0%;",
-        "  line-gap-override: 0%;",
+        ("  ascent-override: #{ascent}%;" if ratio),
+        ("  descent-override: 0%;" if ratio),
+        ("  line-gap-override: 0%;" if ratio),
         "}" ].compact.join("\n")
     end
     private :its_swiss_face

data/lib/its_swiss/version.rb

@@ -1,3 +1,3 @@
 module ItsSwiss
-  VERSION = "0.7.0"
+  VERSION = "0.7.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: its-swiss
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.7.2
 platform: ruby
 authors:
 - Bobby Meyer