構建一個雜誌佈局（譯文）

與以往的Web佈局不同的雜誌佈局，原文地址 Highlights From Building a Magazine Layout 25 Nov 2019

一個雜誌的照片

時至今日，我們掌握的web技術已經是今非昔比。日新月異。由我們來決定：要麼接受挑戰，要麼不學習新事物。我想選擇一種可以使用新CSS技術的設計，並嘗試進一步掌握它們。今天，我選擇一個雜誌佈局，其中包含一些非常有趣，具有挑戰性的設計細節。

內容

爲了正確地用HTML標記，首先我瀏覽了所有內容。對我來說，它讀起來就像一篇帶有標題和描述段落的文章。我想象成像下面的設計模型。

當然，我們不會構建它，但是我想向你們展示在不用雜誌版面的情況下設計的外觀。

在HTML中，我添加了以下內容：

<div class="magazine">
  <div class="item item-72"></div>
  <div class="item item-50">
    <span>...Has lived quietly in harvard square for nearly</span>
    <span class="num">50</span>
    <span>years</span>
  </div>
  <!-- Other items -->
</div>

注意，我將內容放置在<span>內，以便以後可以通過CSS輕鬆控制它。初始HTML的外觀如下：

Grid

網格佈局具有三列，每列具有唯一的大小。我認爲這就是爲什麼佈局首先看起來很有創意的原因。

.magazine {
  display: grid;
  grid-template-columns: 1.35fr 1fr 110px;
}

定義網格後，需要使用grid-column和grid-row將每個元素放置在其位置。藉助Firefox DevTools的網格，這很容易。確保激活“Display line numbers”。

例如，編號爲“50”的項目的位置如下：

.item-50 {
    grid-row: 1/3;
    grid-column: 2/3;
}

與其餘項目類似。完成後，它應該像這樣：

百分比邊距

我很少使用百分比作爲邊距的值，但是對於這種佈局，我發現它適合某些情況。我重點突出了可以用到的項目。

我在每個項目中添加了以下內容：

.item-72 { margin-left: 25%; }

.item-50 { margin-top: 6%; }

.item-decades { margin-left: 10%; }

…等等。這些值是通過反覆試驗選擇的，所以不是使用的特定數字。完成後，它應如下所示：

彈性盒

如果你尚未發現，佈局中的某些項目可以使用flexbox完成。我將向您展示如何構建其中兩個項目。不用說，項目的突出顯示是由Firefox DevTools完成的。

case 1

<div class="item item-friends">
    <span>She wrote a new drama about</span> 
    <span class="num">4</span> 
    <span>cambridge friends</span>
</div>

.item-friends {
    display: flex;
}

.item-friends span:last-child {
    align-self: flex-end;
}

case 2

在這種情況下，彈性項目的方向是垂直的（列）。

 

<div class="item item-50">
    <span>...Has lived quietly in harvard square for nearly</span> 
    <span class="num">50</span> 
    <span>years.</span>
</div>

.item-50 {
    display: flex;
    flex-direction: column;
}

.item-50 span:last-child {
    align-self: flex-end;
}

強制換行

根據設計，有兩個項目，每個項目都有一個句子，每個單詞都要換行。我需要一種在每個詞後強制換行的方法。

最初，我考慮過使用min-content作爲元素寬度的值。根據元素內容來計算最小寬度來運行。

.elem {
    width: min-content;
}

雖然這可能在所有情況下都行不通。我稍微改變了文字可以了：

另一個更保險的解決方案是使用word-spacing大像素值或視窗值的字間距。

.elem {
    word-spacing: 9999px;
    /* Or */
    word-spacing: 100vw;
}

使字體大小適應容器寬度

無論屏幕大小如何，具有深珊瑚色背景的句子都必須保持一行。我嘗試使用視窗單位，但沒用。經過研究，我瞭解了fittext.js而不是其父容器中的合適文本。

但是，我考慮過使用ResizeObserver，對於我的用例來說，就好像有一種魔力！我試着算出一個關鍵值將除以父容器的寬度。

let itemBar = document.querySelector('.item-bar');

const ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width; /* Width of parent */
    let fz = w/29; /* Font size */
    itemBar.style.fontSize = fz + "px";
  }
});

ro.observe(itemBar);

難道不比使用腳本好嗎？ResizeObserver更好。這是顯示的GIF：

視窗單位

因爲值大小的改變是流暢，所以我使用了視窗單位。使用它時，請不要忘記設置字體的最大值，以免在大屏幕上顯得太大。

我使用了一個工具將像素值轉換爲視窗單位。它是基於視窗寬度和字體大小（以像素爲單位）工作的。

我還使用它將文本與其對應的數字對齊。我使用CSS Calc()組合了vw和vh值，如下所示。

.elem {
    position: relative;
    bottom: calc(-2vw - 9vh);
}

可變字體

這是網絡上最令人興奮和最有用的功能之一。在佈局中，我考慮過使用可變字體來改變調整字的粗細。

最初，我爲字體的寬度和粗細定義了兩個CSS變量。然後，我用它來定義font-variation-settings的值。如果您好奇的話，這是有關可變字體的精彩介紹。

:root {
  --width: 100;
  --weight: 500;
}

.num {
    font-variation-settings: 'wdth' var(--width), 'wght' var(--weight);
}

爲了控制調整大小的變量，我爲此使用了ResizeObserver。字體粗細將根據其父元素進行更改。

const ro_2 = new ResizeObserver(entries => {
  for (let entry of entries) {
    let w = entry.contentRect.width;
    let wdth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--width'));
    let f = wdth + w;
    document.documentElement.style.setProperty('--weight', w*1.5);
  }
});

在網格中自身對齊

署名（右邊的突出顯示）應在橫條和雜誌設計末端之間的中間。

起初，我認爲簡單的上邊距就能解決問題，因此我加了以下內容。

.item-byline {
    margin-top: -100%;
}

在這種情況下，邊距等於項目的寬度。沒用！而不是將項目推到頂部，就像加了padding。

由於該行是網格項，因此我應該將對齊方式從默認更改爲start

.item-byline {
    margin-top: -100%;
    align-self: start;
}

最終效果