Print is an old, old technology.
打印是一种古老的技术。
The world has had literally hundred of years to experiment with it and, as such, almost all of the typography terms and techniques we use today online were originally invented for paper.
这个世界已经有数百年的实验时间，因此，我们今天在网上使用的几乎所有印刷术术语和技术最初都是为纸本发明的。
But, as we know, print and digital have different strengths and weaknesses. Most print techniques are designed to make it easier for the eye to navigate printed pages.
但是，正如我们所知，印刷和数字印刷有不同的优点和缺点。 大多数打印技术旨在使眼睛更容易浏览打印的页面。
Drop cap – Silver bells 首字下沉–银铃铛On the other hand, our digital content needs to be more flexible and less tied to a single format or presentation style. That’s a cool thing too, allowing users the freedom to resize and translate text, override fonts and convert text-to-speech as they please.
另一方面，我们的数字内容需要更加灵活，并且与单一格式或演示风格的联系应更少。 这也是一件很酷的事情，它使用户可以随意调整大小和翻译文本，覆盖字体以及将文本转换为语音。
But sometimes we need to be mindful of how classic print techniques translate to digital.
但是有时我们需要注意经典印刷技术如何转换为数字印刷。
Take the ‘drop cap’. Though there’s definitely an element of decoration, it is always used to visually mark the beginning of a new section.
采取“首字下沉”。 尽管肯定有装饰元素，但它总是用于视觉标记新部分的开始。
But online, we’ve come to associate up-sized lettering and capitalization with shouting. Happily our screen readers are clever enough to know NOT to shout out the giant ‘A’ at the start of the poem above?
但是在网上，我们已经将大字体和大写与喊叫联系在一起。 令人高兴的是，我们的屏幕阅读器足够聪明，以至于不知道在上面的诗歌开头不会大声喊叫“ A”吗？
The ‘pull quote’ is another print invention that has translated very nicely to the digital world.
“引号”是另一种印刷发明，已很好地转化为数字世界。
Creative use of pull quotes: The War on Religion 拉引号的创造性用法：《宗教战争》It’s a device designed to isolate and visually highlight a particularly interesting sentence within the body copy. It’s a ‘lure’ intended to draw skimmers into the content.
这是一种旨在隔离并在视觉上突出显示正文中特别有趣的句子的设备。 这是一种“诱惑”，旨在将撇脂者吸引到内容中。
Rolling Stone, in particular, has a long history of using the pull quote in powerful and inventive ways.
特别是滚石，在以强大且富有创造力的方式使用拉引语方面有着悠久的历史。
But as useful as it is, the pull quote has little value outside of a visual layout. Even though it’s constructed from ‘real content’, in many ways, it’s nothing more than a ‘page decoration’ – like a fancy drop cap.
但是，拉引号虽然很有用，但在视觉布局之外几乎没有任何价值。 即使它是从“真实内容”构建的，在许多方面，也不过是“页面装饰”(例如精美的封口盖)。
And that’s fine – but our markup it usually looks like this:
很好-但是我们的标记通常如下所示：
<p>You couldn't come out there wimpy, you had to come out there strong. It was just rock'n'roll and in your face, but, like you said, the drunk edge gave it a real power.</p> <p class="pullquote">"It was just rock'n'roll and in your face"</p> Alice Cooper in Rolling Stone 爱丽丝·库珀在滚石乐队The above markup makes complete sense in a visual web magazine layout above – but if you were listening to it via text-to-speech, you would hear a random sentence repeated for no obvious reason.
在上面的可视网络杂志布局中，上面的标记是完全有意义的-但是，如果您通过文字转语音进行收听，则可能会听到重复的随机句子，而没有明显的原因。
What’s more, sometimes that duplicated sentence might be rendered 3 or 4 paragraphs away from the place where it was pulled from – making it even more confusing to the listener.
更重要的是，有时重复的句子可能会在离其被拉出的地方3或4个段落之外呈现，这会使听者更加困惑。
When we’re adding these pull quotes to the markup, we’re effectively altering the raw content of the author’s work. These quotes are typically selected by a subeditor – not the author – who pick them to look good with the current layout.
当我们将这些拉引号添加到标记中时，我们实际上是在改变作者作品的原始内容。 这些引号通常是由子编辑器(而不是作者)选择的，他们选择它们以使当前的布局看起来更好。
This means we’re sending a somewhat temporary ‘stylistic whim’ that gets permanently indexed by Google and displayed by news readers and any other device using RSS.
这意味着我们正在发送某种临时的“风格奇想”，该信息会被Google永久编入索引，并由新闻阅读器和其他使用RSS的设备显示。
And what happens if the next-gen Rolling Stone layout decides not to even use pull quotes?
如果下一代滚石布局决定甚至不使用拉引号怎么办？
Problems, is what happens.
问题 ，是怎么回事。
Just as the Hippocratic oath for doctors says ‘Do no harm‘, I think we should apply a similar approach to presenting our content:
正如希波克拉底宣誓的医生说“ 不要伤害 ”一样，我认为我们应该采用类似的方法来展示我们的内容：
‘Do nothing to pollute your original content‘.
“ 不做任何污染您原始内容的事情 ”。
Doubling up parts of your content is in a small way changing and slightly polluting the original content.
将内容的一部分加倍只是在很小的程度上更改并稍微污染了原始内容。
There are at least two solutions that make some sense in this scenario. I don’t want to dive too deep on the technical detail here (the links below give fuller explanations) but let’s talk about the basic how and whys.
在这种情况下，至少有两种解决方案有意义。 我不想在这里深入探讨技术细节(下面的链接提供了更完整的说明)，但让我们讨论一下基本的方式和原因。
Roger Johansson came up with the first solution I came across and Chris Coyier later refined it. It involved wrapping the quoted text in a <span class="pullquote"> and using JavaScript to create a new pullquote page element.
Roger Johansson提出了我遇到的第一个解决方案，随后Chris Coyier对其进行了改进。 它涉及将引用的文本包装在<span class =“ pullquote”>中，并使用JavaScript创建新的pullquote页面元素 。
This is still a very sound approach. It is clean and easy to implement. Kill the JavaScript and the pull quote is gone. On the downside, I think the assumption that web bots won’t ever parse JavaScript is probably not as clear-cut as it was a few years ago.
这仍然是一个非常合理的方法。 它很干净，易于实现。 杀死JavaScript，拉引号就消失了。 不利的一面是，我认为网络机器人永远不会解析JavaScript的假设可能不像几年前那么明确。
That’s certainly not a big issue.
这当然不是一个大问题。
Back in 2011, Maykel Loomans from Instagram developed this method which I still prefer. It uses CSS generated content to render your pull quote into a .before pseudo element.
早在2011年， InstagramMaykel Loomans开发了这种方法 ，但我仍然喜欢这种方法 。 它使用CSS生成的内容将您的拉式引号呈现为.before伪元素。
The key part of the CSS is:
CSS的关键部分是：
.has-pullquote{ content: attr(data-pullquote); ...}The remainder of the CSS is just styling and position.
CSS的其余部分只是样式和位置。
Maykel’s HTML looks like this:
MaykelHTML如下所示：
<p class="has-pullquote" data-pullquote=" It was just rock'n'roll and in your face"> You couldn't come out there wimpy, you had to come out there strong. It was just rock'n'roll and in your face, but, like you said, the drunk edge gave it a real power. </p>Like all CSS generated content, this pull quote text is not treated like ‘real text’ by the web browser. You can see it, but you can’t select it or copy it, and screen readers and web spiders are blind to it. Strip the CSS away and it’s gone.
像所有CSS生成的内容一样，Web浏览器不会将此拉引号文本视为“真实文本”。 您可以看到它，但无法选择或复制它，而屏幕阅读器和网络蜘蛛对此视而不见。 剥开CSS，它消失了。
I like this method partly because it doesn’t rely on JavaScript. This feels like a presentation issue and so should reside in the CSS.
我之所以喜欢这种方法，部分原因是它不依赖JavaScript。 这感觉像是一个演示文稿问题，因此应驻留在CSS中。
It will also degrade transparently. Any future CSS layout that decides not to include pull quote – consciously or not – will simply ignore the data attribute.
它也会透明地降解。 将来任何有意或无意决定不包含拉引号CSS布局都将忽略data属性。
I think it’s a good solution.
我认为这是一个很好的解决方案。
Originally published in the SitePoint Design Newsletter.
最初发布在SitePoint设计新闻中 。
翻译自: https://www.sitepoint.com/taking-double-trouble-pull-quotes/
相关资源：jdk-8u281-windows-x64.exe