[譯] 讓字母「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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。