[译] 让字母“i”的点动起来的秘密

• 原文地址：The Trick to Animating the Dot on the Letter “i”
• 原文做者：Ali Churcher
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：vitoxli
• 校对者：Baddyo、lzfcc

让字母“i”的点动起来的秘密

诀窍是这样的：把土耳其字母“ı”和句号“.”结合起来，咱们就能够建立一个看起来像是字母“i”但实际上倒是两个独立的元素的东西。这为咱们提供了一些有趣的选项，让咱们能为“i”的点添加独立于其下部分的样式或动画。若是担忧有可访问性方面的问题，那么不用担忧，咱们将介绍所知的最佳实践。

让咱们来看看如何建立这些分离的“字母”并设置其样式，以及何时可使用它们，何时不要使用它们。

一些例子

经过这种方式来实现的一些样式和动画：

来看看 Ali C（@alichur）在 CodePen 的样式和动画。

因为字母的两个部分都是常规的 Unicode 字符，所以它们会随着字体变化和页面缩放变化，正如其它普通文本同样。如下是一些不一样字体、样式和缩放的示例：

来看看 Ali C（@alichur）在 CodePen 的不一样的字体和缩放。

逐步介绍这项技术

让咱们来了解一下这项技术的工做原理。

使用 Unicode 字符来组合

咱们使用字符（ı）来表示去掉点的字符“i”和表示点的句号来进行组合。可是，咱们一样可使用其它字符，好比字符（ȷ）来表示去掉点的字符“j”，甚至可使用表示音调的字符，好比“ñ”（~）或者“è”（`）。

经过把它们放到 span 标签中并设置 display 属性为 block 来把这些字符堆叠在一块儿。

<span class="character">.</span>
<span class="character">ı</span>
复制代码

.character {
  display: block;
}
复制代码

对齐字符

它们须要距离彼此近一些。咱们能够经过调整行高并去掉 margin 来实现。

.character {
  display: block;
  line-height: 0.5;
  margin-top: 0;
  margin-bottom: 0;
}
复制代码

为点元素增长 CSS 动画

好比像这样的弹跳动画：

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -10px, 0);
  }
}

.bounce {
  animation: bounce 0.4s infinite alternate;
}
复制代码

查看 CSS-Tricks 年鉴中更多 CSS 动画。

目前为止应该是这样的：

来看看 Ali C（@alichur）在 CodePen 的建立字母。

添加单词中的其余字母

能够仅仅给“i”单独添加动画，可是“i”可能只是单词中的一个字母，好比“Ping”。咱们将添加了动画的字母放在 span 标签中来确保全部内容都在一行。

<p>
  P
  <span>
    <span class="character">.</span>
    <span class="character>ı</span> </span> ng </p> 复制代码

inline-block 会在元素间自动增长间隔，因此请先确保已经移除了它们之间的间隙。

最后阶段：

来看看 Ali C（@alichur）在 CodePen 的在单词中添加字母。

关于 SVG

经过两个或更多个 SVG 元素建立字母能够实现相同的效果。在这个示例中，圆形元素的动画独立于矩形元素。

来看看 Ali C（@alichur）在 CodePen 的使用 SVG 为 i 添加动画。

尽管 SVG 字母没法随字体更改，但它为那些 Unicode 没法表示的字母部件和字体中不存在的字母样式提供了添加动画的可能性。

你将在哪里用到这些？

你想在哪里用到这些呢？个人意思是，对于 body 内容或者任何形式的长篇幅的内容，这项技术不是很好的实践。它不只会影响可读性（你能想象在这篇文章中全部的“i”都使用了动画吗？），还会对辅助技术产生很差的影响，好比屏幕阅读器，咱们将在下面对此进行讨论。

相反，当咱们的内容更多地是出于装饰的目的时，使用这项技术是个很好的选择。经过这项技术来制做 logo，或者用在那些用来描述而不是经过辅助技术解释成文字的图标中，都是很好的实践。

可访问性

回到咱们的“Ping”例子，屏幕阅读器会将它读做 P . ı ng。这并非咱们指望听到的读音而且绝对会给任何听到它的人形成困扰。

能够根据用法添加不一样的 ARIA 属性，从而使文本以不一样的方式朗读。例如，咱们能够将整个元素设置为图像并添加文本做为其标签：

<div role=img aria-label="Ping">
  <p>P<span>.</span><span>ı</span>ng</p>
</div>
复制代码

这样，外部 div 元素描述了屏幕阅读器读取的文本的含义。可是，咱们还但愿辅助技术能跳过内部元素。咱们能够为添加 aria-hidden="true" 或 role="presentation"，这样它们便不会被解释为文本：

<div role=img aria-label="Ping">
  <p role="presentation">P
    <span>.</span>
    <span>ı</span>
  ng</p>
</div>
复制代码

以上只在一台 Mac 上的 Safari 中经过 VoiceOver 进行了测试。若是在其余辅助工具中遇到了任何问题，请在评论中进行留言。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。