its-swiss 0.7.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a5ab32d42d182f1c9e0c8efa403cd4f90857e9c8c1b955ba31023330b1095a8
-  data.tar.gz: 0f39bbc46d60b4374c1334b644c28e4d061cc9778b08b2f9a474cbb4aa824341
+  metadata.gz: 21caf44ed83d26ed7f70b687206792252028a0120aafd843821322c776f0fd87
+  data.tar.gz: 3b3612935647de8dfc405d205a3adf6fd170b5f0493faa34d019cac02d237e4c
 SHA512:
-  metadata.gz: 80cff5ca6de7fa9aa649fcf1146e78b9315d61531ef4968875e895db0abd8bd636fd07b33df90b41b38a6374a530945459e4032534c303f599774abd347182c3
-  data.tar.gz: 3090006b7c520d07a88c2527a73b18f94cac3a484d225c393d88e8956a1bb8af559e26dafc8bc384922659892f0577638fa9174d2c03a168b23e43fb8f7d4171
+  metadata.gz: 478f0c8ded5c737b5370029359ab04c18b717b6398a9c2c6c3985a2289ebe8e8fc62797e3303d3e05bc593a23b0c565ae0fc88591afb53de3d4f20be638f54a5
+  data.tar.gz: 8bcebb3045f45a9d2a9a636b1544936badd47ea45c16ff6f8bcf79c45fe9706b1663da0f70b7d8ad262744d70589f8ede84fca40f30ca4289f4944df30c35ed6

data/CHANGELOG.md

@@ -2,10 +2,21 @@
 
 Semver. Consumers pin `~> 0.1`.
 
-## Unreleased
+## 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 +31,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

@@ -177,11 +177,18 @@ 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 one line inside the two-line box: 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 +198,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,7 +273,18 @@
     border-bottom: var(--rule-hair) solid var(--ink);
     background: transparent;
     color: inherit;
-    font: inherit;
+    /* 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);
     /* 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. */
     block-size: var(--line-2);

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.1"
 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.1
 platform: ruby
 authors:
 - Bobby Meyer