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的文字。 它可能可以追溯到我对网络排版的最早探索。 由于没有版权，因此您可以在网上以各种形式找到这些文本，并且以某种方式成为我的备用文献之一。 然后在某个时候，我的朋友比尔(Bil)让我借用了他1930年的罗克韦尔·肯特(Rockwell Kent)版本，这确实让我着迷。 排版很简单，但结合了如此精美的插图，它就坐在我的脑后，等待着，轻轻地抚摸着。

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年度马拉松比赛 ，这是每年在新贝德福德捕鲸博物馆举行的这本书的现场阅读。 在今年的活动之后，我们讨论了寻找优质电子书版本有多困难，这当然导致了A Project的构想。 由于我去年开始进行一些实验，尝试用现代的网络排版和排版技术在网络上制作一本书，就像在合适的时机出现时，这似乎是最合适的选择。

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)在他最新的《版式历险记》中写道，如何更好地设计书籍封面(或在网络上排版该书的文字)是最好的方法。 他还提供了CodePen链接，可以链接到大量Moby Dick进行练习。 这不是全部内容，但是可以通过Project Gutenberg轻松找到。 现在，我们只需要定义什么才能在网上带来良好的读书体验。

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.

首先，我们将设置一个简单的基准：将文本分为每章不同的页面，提供简单的导航结构将它们绑在一起，并添加一些最小的文本格式。 我确实添加了一个或两个改进来设置每章的第一字母和第一行的样式，并添加了足够的布局格式以使段落结构的基础和内容在屏幕上更加平衡。 现在可以在线免费获得源代码和全文 。 但是要创造一种甚至接近罗克韦尔·肯特美女的体验，我们需要做更多的事情。

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.

在接下来的几期新闻通讯中，我们将应用在前几期中介绍的内容越来越多，并且会更进一步。

• Make the typography responsive to screen size
  使排版响应屏幕尺寸
• Add web fonts (both static and variable)
  添加网络字体(静态字体和可变字体)
• Update the responsive typography to a more dynamic solution
  将响应式排版更新为更动态的解决方案
• 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
  为用户添加印刷控件，以设置亮/暗模式(结合操作系统设置检测)，字体大小和间距的首选项
• 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
  体验更像书本的体验，尤其是在基于触摸的设备上

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.

待完成时，我们将拥有一个非常完整的印刷和版式设计，可以对其进行调整或调整，以处理几乎所有文本。 除了仅用书本制作网站之外，它的目的还在于真正研究什么可以带来出色的阅读体验，并使其在网络上比我们在印刷或任何其他当前数字格式下的阅读体验更好。

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静态网站生成器创建了一个网站。 我尽力使该设置尽可能简单，但是为了平衡开发的简便性和输出的质量，一定数量的构建过程复杂性是必需的。 整个源可在Github上获得，并且已编译的站点会自动部署到Netlify 。 您随时可以随时从Github下载源代码，然后在“ _site”文件夹中查找完整的编译站点。 这样，如果您不太愿意，则不必设置构建过程。 如果您愿意，我将在README.md文件中包含一些有关启动该项目并使其运行的基本文档。

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

我将为每个问题创建一个“发布标签”，因此您始终可以查看与该问题对应的代码，但是最新版本始终是Netlify上部署的版本，并且可以在https：// mobydick上查看.rwt.io

资源资源 (Resources)

• Project source on GitHub

  GitHub上的项目源

• Live site

  现场直播

• Moby Dick on Project Gutenberg

  Moby Dick在古腾堡计划中

• Part 2: Responsive Typography

  第2部分：响应式排版

• Part 3: Adding web fonts

  第3部分：添加网络字体

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.

这是我关于网络字体和排版的每周新闻摘要。 如果您希望每周获得大量的网络排版技巧，新闻以及我即将举行的讲座和研讨会，则可以 在此处注册新闻通讯 。

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!

如果您有帮助，请分享您的工作-如果您希望在以后的期刊中看到一些内容，请告诉我！

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

最初于 2020 年4月20日 在 rwt.io 上 发布 。