闲得蛋疼于是实现了一个 iPhone SE 上的微信聊天样式

起因是 /t/363313，后来我需要在我的 blog 里面嵌入聊天截图，但是觉得截图的话太浪费，而且不能缩放，于是就打算实现一个微信的聊天界面。

例子：某篇博文的更新。（这个例子展示了如何添加自定义头像，以及使用表情，当书写的时候，表情就是 [表情的名字]。）

比如书写

```iPhone-SE-WeChat6
WeChat chat history with Sometwo
Sometwo

* 13:52
r ( S ) [ Sometwo ] Hi there!
* “ Sometwo ” has recalled a message.
s [ Me ] Hey! What did you recall?
r ( S ) [ Sometwo ] A typo.
```

得到的效果是

当然，一贯的考虑是必须符合 accessibility，所以该有的 aria 东西和高对比度模式的测试都不能少。另外打印的时候显然不希望这样，打印的时候会变成

因为这个比较简单，所以就不贴代码了……主要思路是在 Markdown 编译器处理代码块的时候加入自己的处理程序，以及写好 CSS 即可（注意：为了读屏器按照语义顺序阅读，应该用 ::before 生成头像，用 ::after 生成对话气球的小三角）。

geelaw

2017-07-24 22:54:03 +08:00

@mrtctl 我不控制这个问题，而且 break-all 之后也不会像微信一样换行。另外我也不可能做到像微信那样经过断行规则后自动缩小泡泡的尺寸，这是 CSS 和 HTML 的渲染引擎的问题。

实际上微信的换行算法是有问题的，比如它不认为 é 是一个拉丁字母，导致有的时候单词回从中间断开。