鯨魚網(wǎng)絡(luò)連接

I don’t know when it was I started using the text of Moby Dick in my workshops and talks. Likely it dates back to some of my earliest explorations of web typography. Since it’s out of copyright, it’s one those texts you can find online in various forms, and somehow that became one of my standbys. Then at some point my friend Bil let me borrow his 1930’s Rockwell Kent edition and it really captivated me. The typesetting is straightforward, but combined with such wonderful illustrations it just sat there in the back of my brain, waiting, nudging.

我不知道什么時候開始在工作坊和講座中使用Moby Dick的文字。 它可能可以追溯到我對網(wǎng)絡(luò)排版的最早探索。 由于沒有版權(quán)，因此您可以在網(wǎng)上以各種形式找到這些文本，并且以某種方式成為我的備用文獻(xiàn)之一。 然后在某個時候，我的朋友比爾(Bil)讓我借用了他1930年的羅克韋爾·肯特(Rockwell Kent)版本，這確實讓我著迷。 排版很簡單，但結(jié)合了如此精美的插圖，它就坐在我的腦后，等待著，輕輕地?fù)崦?

Every year, Bil participates in the Annual Moby-Dick Marathon, a live reading of the book held every year at the New Bedford Whaling Museum. After this year’s event we talked about how hard it was to find a good eBook version, which of course led to the idea of A Project. Since I had started working on some experiments in what a book could be like on the web with modern web typography and layout techniques last year, it seemed this might be the perfect fit when the right time came along.

每年，Bil都會參加Moby-Dick年度馬拉松比賽 ，這是每年在新貝德福德捕鯨博物館舉行的這本書的現(xiàn)場閱讀。 在今年的活動之后，我們討論了尋找優(yōu)質(zhì)電子書版本有多困難，這當(dāng)然導(dǎo)致了A Project的構(gòu)想。 由于我去年開始進行一些實驗，嘗試用現(xiàn)代的網(wǎng)絡(luò)排版和排版技術(shù)在網(wǎng)絡(luò)上制作一本書，就像在合適的時機出現(xiàn)時，這似乎是最合適的選擇。

Last week, it seems that time had arrived. In fact it was prompted another friend via his own newsletter. Robin Rendle wrote in his latest Adventures in Typography about how the best way to get better at designing book covers (or typesetting the text of that book on the web) was to do it. And he provided a CodePen link to a fair chunk of Moby Dick upon which to practice. It wasn’t the whole text, but that was easily findable via Project Gutenberg. Now we just have to define what will make for a good book experience on the web.

上周，時間似乎到了。 實際上，另一個朋友是通過他自己的時事通訊提示的。 羅賓·雷德爾(Robin Rendle)在他最新的《版式歷險記》中寫道，如何更好地設(shè)計書籍封面(或在網(wǎng)絡(luò)上排版該書的文字)是最好的方法。 他還提供了CodePen鏈接，可以鏈接到大量Moby Dick進行練習(xí)。 這不是全部內(nèi)容，但是可以通過Project Gutenberg輕松找到。 現(xiàn)在，我們只需要定義什么才能在網(wǎng)上帶來良好的讀書體驗。

Starting with no web fonts and some generally light typography從沒有網(wǎng)絡(luò)字體和一些一般的淺字體開始

To start, we’ll set a simple baseline: break the text into separate pages for each chapter, provide a simple navigation structure to tie them together, and add some minimal text formatting. I did add one or two refinements to style the first letter and first line of each chapter, and enough layout formatting to keep the basics of paragraph structure and the content a bit more balanced on screen. The source code and the entire text are now freely available online. But to create an experience that even comes close to that Rockwell Kent beauty, we need to do a lot more.

首先，我們將設(shè)置一個簡單的基準(zhǔn)：將文本分為每章不同的頁面，提供簡單的導(dǎo)航結(jié)構(gòu)將它們綁在一起，并添加一些最小的文本格式。 我確實添加了一個或兩個改進來設(shè)置每章的第一字母和第一行的樣式，并添加了足夠的布局格式以使段落結(jié)構(gòu)的基礎(chǔ)和內(nèi)容在屏幕上更加平衡。 現(xiàn)在可以在線免費獲得源代碼和全文 。 但是要創(chuàng)造一種甚至接近羅克韋爾·肯特美女的體驗，我們需要做更多的事情。

Over the next few newsletters, we’ll apply more and more of what we’ve covered here in previous issues, and take it even further.

在接下來的幾期新聞通訊中，我們將應(yīng)用在前幾期中介紹的內(nèi)容越來越多，并且會更進一步。

• Make the typography responsive to screen size
  使排版響應(yīng)屏幕尺寸
• Add web fonts (both static and variable)
  添加網(wǎng)絡(luò)字體(靜態(tài)字體和可變字體)
• Update the responsive typography to a more dynamic solution
  將響應(yīng)式排版更新為更動態(tài)的解決方案
• Add a web font loader and style fallback fonts for a better loading experience
  添加Web字體加載器和樣式后備字體以獲得更好的加載體驗
• Add typographic controls for the user to set preferences for light/dark mode (coupled with OS setting detection), font size, and spacing
  為用戶添加印刷控件，以設(shè)置亮/暗模式(結(jié)合操作系統(tǒng)設(shè)置檢測)，字體大小和間距的首選項
• Add bookmarking to save or share your place in the text
  添加書簽以保存或分享您在文本中的位置
• Add support for offline reading
  添加對離線閱讀的支持
• Experiment with a more book-like experience, especially on touch-based devices
  體驗更像書本的體驗，尤其是在基于觸摸的設(shè)備上

By the time we’re done, we’ll have a pretty complete typographic and layout design that could be adapted or tweaked to work with almost any text. Beyond just making a website out of a book, the intent is to really examine what makes a great reading experience, and make it even better on the web than we can in print or any other current digital format.

待完成時，我們將擁有一個非常完整的印刷和版式設(shè)計，可以對其進行調(diào)整或調(diào)整，以處理幾乎所有文本。 除了僅用書本制作網(wǎng)站之外，它的目的還在于真正研究什么可以帶來出色的閱讀體驗，并使其在網(wǎng)絡(luò)上比我們在印刷或任何其他當(dāng)前數(shù)字格式下的閱讀體驗更好。

And maybe I’ll finally land my whale.

也許我最終會降落鯨魚。

To get started, I’ve created a site using the Eleventy static site generator. I’ve endeavored to keep that setup as simple as possible, but some amount of build-process complexity was necessary to balance ease of development and quality of output. The entire source is available on Github and the compiled site is automatically deployed to Netlify. At any point you can always download the source from Github and look in the ‘_site’ folder to find the complete, compiled site. This way you don’t have to set up the build process if you are not so inclined. If you are, I’m including some basic documentation on getting the project up and running in the README.md file.

首先，我使用Eleventy靜態(tài)網(wǎng)站生成器創(chuàng)建了一個網(wǎng)站。 我盡力使該設(shè)置盡可能簡單，但是為了平衡開發(fā)的簡便性和輸出的質(zhì)量，一定數(shù)量的構(gòu)建過程復(fù)雜性是必需的。 整個源可在Github上獲得，并且已編譯的站點會自動部署到Netlify 。 您隨時可以隨時從Github下載源代碼，然后在“ _site”文件夾中查找完整的編譯站點。 這樣，如果您不太愿意，則不必設(shè)置構(gòu)建過程。 如果您愿意，我將在README.md文件中包含一些有關(guān)啟動該項目并使其運行的基本文檔。

I’ll create a ‘release tag’ with each issue, so you’ll always be able to look at the code corresponding to that issue, but the latest version will always be what’s deployed on Netlify, and viewable at https://mobydick.rwt.io

我將為每個問題創(chuàng)建一個“發(fā)布標(biāo)簽”，因此您始終可以查看與該問題對應(yīng)的代碼，但是最新版本始終是Netlify上部署的版本，并且可以在https：// mobydick上查看.rwt.io

資源資源 (Resources)

• Project source on GitHub

  GitHub上的項目源

• Live site

  現(xiàn)場直播

• Moby Dick on Project Gutenberg

  Moby Dick在古騰堡計劃中

• Part 2: Responsive Typography

  第2部分：響應(yīng)式排版

• Part 3: Adding web fonts

  第3部分：添加網(wǎng)絡(luò)字體

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

這是我關(guān)于網(wǎng)絡(luò)字體和排版的每周新聞?wù)?如果您希望每周獲得大量的網(wǎng)絡(luò)排版技巧，新聞以及我即將舉行的講座和研討會，則可以 在此處注冊新聞通訊 。

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

如果您有幫助，請分享您的工作-如果您希望在以后的期刊中看到一些內(nèi)容，請告訴我！

Originally published at rwt.io on April 20, 2020.

最初于 2020 年4月20日 在 rwt.io 上 發(fā)布 。

翻譯自: https://medium.com/web-typography-news/landing-the-whale-making-a-book-on-the-web-part-1-65b1be04b3f8

鯨魚網(wǎng)絡(luò)連接

總結(jié)

以上是生活随笔為你收集整理的鲸鱼网络连接_登陆鲸鱼：在网络上读书，第1部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。