Typography：将输入功能与可调整大小元素的功能绑定在一起

Question

我正在开发一个小型排版应用程序，但遇到了障碍。我已经将核心代码提取到笔中，即 UI 中还有其他输入、按钮。因此，为什么我使用 querySelectorAll('input[type="number"]') 等

目标是让可拖动元素通过更新 CSS 属性来更新文本度量（行长），就像现在的数字输入一样：

--_typecsset-text-measure

我有一个调整大小观察者将可拖动元素记录到控制台，但此时我已经超出了我的深度！

我设置了一支笔：https://codepen.io/timpish/full/abMdBay

Answer 1

这会将 CSS 变量更新为可拖动元素的宽度（以 px 为单位）：

let observeMeasure = new ResizeObserver(function (mutations) {
  document.documentElement.style.setProperty(
    "--_typecsset-text-measure",
     mutations[0].contentRect.width + "px"
  );
});

演示：

// font and lead resizers
const numberInputs = document.querySelectorAll('input[type="number"]');
//const measure = document.getElementById("measure");
//const labels = document.querySelectorAll('label');

function updateProp(event) {
  const uom = this.dataset.uom || "";
  document.documentElement.style.setProperty(
    `--_${this.name}`,
    this.value + uom
  );
  //const label = labels[Array.from(rangeSliders).indexOf(this)];
  //label.textContent = parseFloat(this.value).toFixed(3);
}
numberInputs.forEach((input, index) => {
  input.addEventListener("input", updateProp);
  //labels[index].textContent = parseFloat(input.value).toFixed(3);
});

// measure (line length)
let observeMeasure = new ResizeObserver(function (mutations) {
  document.documentElement.style.setProperty(
    "--_typecsset-text-measure",
     mutations[0].contentRect.width + "px"
  );
});
let drag = document.querySelector(".resizable");
observeMeasure.observe(drag);

/* globals */
*,
*::before,
*::after {
  box-sizing: border-box;
}

*:not(main p) {
  margin: 0;
  padding: 0;
}

:where(html) {
  --_typecsset-body-fontSize: var(--typecsset-base-fontSize, 1rem);
  --_typecsset-body-lineHeight: var(--typecsset-base-lineHeight, 1.5);
  --_typecsset-color-dark: var(--typecsset-color-dark, hsl(0, 0%, 0%));
  --_typecsset-color-light: var(--typecsset-color-light, hsl(0, 0%, 100%));
  --_typecsset-color-neutral: var(--typecsset-color-neutral, hsl(0, 0%, 50%));
  --_typecsset-recursive-caslAxis: var(
    --typecsset-recursive-caslAxis,
    "CASL" 0
  );
  --_typecsset-recursive-crsvAxis: var(
    --typecsset-recursive-crsvAxis,
    "CRSV" 0.5
  );
  --_typecsset-recursive-monoAxis: var(
    --typecsset-recursive-monoAxis,
    "MONO" 0
  );
  --_typecsset-recursive-slntAxis: var(
    --typecsset-recursive-slntAxis,
    "slnt" 0
  );
  --_typecsset-recursive-wghtAxis: var(
    --typecsset-recursive-wghtAxis,
    "wght" 400
  );
  --_typecsset-text-measure: var(--typecsset-text-measure, 80rem);
  font-variation-settings: var(--_typecsset-recursive-monoAxis),
    var(--_typecsset-recursive-caslAxis), var(--_typecsset-recursive-wghtAxis),
    var(--_typecsset-recursive-crsvAxis), var(--_typecsset-recursive-slntAxis);
  font-family: Recursive, sans-serif;
  line-height: 1;
}

body {
  background-color: var(--_typecsset-color-light);
  color: var(--_typecsset-color-dark);
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--_typecsset-color-dark);
    color: var(--_typecsset-color-light);
  }
}

main {
  font-family: "Alegreya", serif;
  font-size: var(--_typecsset-body-fontSize);
  line-height: var(--_typecsset-body-lineHeight);
}

/* elements */
h2,
h4,
input,
main {
  padding-left: 0.2rem !important;
  padding-right: 0.2rem !important;
}

input {
  padding-right: 0 !important;
}

h1,
h2,
h3,
h4 {
  line-height: 0.9 !important;
}

h2,
h4 {
  color: var(--_typecsset-color-neutral) !important;
  font-size: 15px;
}

h2 {
  /* 'cap' unit for capital letters. Safari's jank. */
  letter-spacing: 0.06cap;
  text-transform: uppercase;
  --_typecsset-recursive-wghtAxis: var(
    --typecsset-recursive-wghtAxis,
    "wght" 600
  );
  font-variation-settings: var(--_typecsset-recursive-wghtAxis);
}

/* sub header below inputs/buttons */
h4 {
  font-weight: normal;
  text-transform: none;
}

/* drag */
h4 + h4 {
  color: currentColor !important;
  padding-bottom: 0.1rem;
}

input {
  background-color: inherit;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  border-top: 1.618px solid var(--_typecsset-color-neutral);
  border-bottom: 1.618px solid var(--_typecsset-color-neutral);
  border-right: none;
  border-left: none;
  border: 1.618px solid var(--_typecsset-color-neutral);
  border-radius: 3px;
  /* box-shadow: inset 0.25rem 0.25rem 0 var(--_typecsset-color-neutral) */
  padding: ;
}

/* blockquote inside main */
blockquote {
  hanging-punctuation: first last;

  &::before {
    content: "\201C";
  }

  &::after {
    content: "\201D";
  }

  &::before,
  &::after {
    color: var(--_typecsset-color-neutral);
  }
}

/* layout primitives */

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--_typecsset-text-measure);
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 0.618rem);
  /* use scale */
  justify-content: space-between;
  align-items: center;
}

.icon-ruler {
  background-image: url("icons.svg#icon-ruler-view");
  background-origin: content-box;
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 3.1rem 1rem;
}

.rhythm {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

[class^="rhythm"] > * {
  margin-block: 0;
}

.rhythm-xs > * + * {
  margin-block-start: 0.2rem;
}

.rhythm-s > * + * {
  margin-block-start: 0.309rem;
}

.rhythm-m > * + * {
  margin-block-start: 0.618rem;
}

.rhythm-l > * + * {
  margin-block-start: 1.236rem;
}

.rhythm-xl > * + * {
  margin-block-start: 1.857rem;
}

/* utils */
.typeface-alegreya {
  font-family: "Alegreya", serif;
}

.color\:neutral {
  color: var(--_typecsset-color-neutral);
}

.cursor\:crosshair {
  cursor: crosshair;
}

.resizable {
  resize: inline;
  overflow: scroll;
}

.width\:100\% {
  width: 100% !important;
}

/*debugger */
* {
  outline: cornflowerblue dotted 0.5px;
}

<body class="center">

  <nav class="rhythm-m">

    <section class="resizable">
      <label class="rhythm-xs">
        <h2>Measure</h2>
        <input id="measure" class="width:100% icon-ruler steppers-none" type="number" value="80" step="1" min="10" max="150" data-uom="rem" name="typecsset-text-measure">
        <div class="cluster">
          <h4>rem</h4>
          <h4>drag&nbsp;&searr;&nbsp;</h4>
        </div>
      </label>
    </section>
  </nav>

  <main class="typeface-alegreya">
    <p>
    <blockquote>The density of texture in a written or types<span title="45th character" class="color:neutral cursor:crosshair">&brvbar;</span>et page is called it<span title="66th character" class="color:neutral cursor:crosshair">&brvbar;</span>s <em>color</em>.<span title="75th character" class="color:neutral cursor:crosshair">&brvbar;</span> This has nothing to do with red or green ink; it refers only to the darkness or blackness of the letterforms in mass. Once the demands of legibilty and logical order are satisfied, <em>eveness of color</em> is the typographer's normal aim. And color depends on four things: the design of the type, the spacing between the letters, the spacing between the words, and the spacing between the lines. None is independent of the others.</blockquote>
    </p>
    <p>
    <blockquote>Anything from <em>45 to 75</em> characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.</blockquote>
    </p>
  </main>

</body>

</html>