首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
geelaw
V2EX  ›  分享创造

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

  •  
  •   geelaw · 2017-07-24 19:34:52 +08:00 · 3545 次点击
    这是一个创建于 913 天前的主题,其中的信息可能已经有所发展或是发生改变。

    起因是 /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 生成对话气球的小三角)。

    7 回复  |  直到 2017-12-29 13:22:04 +08:00
    crs0910
        1
    crs0910   2017-07-24 22:14:22 +08:00 via iPhone
    好玩
    Gauin
        2
    Gauin   2017-07-24 22:30:48 +08:00
    不错哦
    mrtctl
        3
    mrtctl   2017-07-24 22:39:03 +08:00
    例子中 "是用改锥强行撬开后盖。。。" 处似乎有一个换行处理问题,是不是需要 “ word-break: break-all;”?
    geelaw
        4
    geelaw   2017-07-24 22:54:03 +08:00
    @mrtctl 我不控制这个问题,而且 break-all 之后也不会像微信一样换行。另外我也不可能做到像微信那样经过断行规则后自动缩小泡泡的尺寸,这是 CSS 和 HTML 的渲染引擎的问题。

    实际上微信的换行算法是有问题的,比如它不认为 é 是一个拉丁字母,导致有的时候单词回从中间断开。
    crs0910
        5
    crs0910   2017-07-25 22:18:38 +08:00 via iPhone
    @geelaw 好像微信泡泡并没有根据换行缩小吧?
    geelaw
        6
    geelaw   2017-07-25 23:15:32 +08:00
    @crs0910 iOS 10 上 WeChat 6 会的,比如例子里面的

    > 是把 pcb ……

    > 这一系列……

    在 iPhone SE 上都是两行,但是宽度不同。
    deepkolos
        7
    deepkolos   2017-12-29 13:22:04 +08:00
    @geelaw 那个小三角可以通过 clip-path 来绘制, 两个 div, 一个背景边框, 一个内容, 小圆角实现通过多边形来模拟, 效果如下

    https://github.com/HZ-WeiBao/app_container/blob/master/modules/littleChat/views/Chat/Window.css#L100

    粗暴但是但可用的方式...
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2056 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 30ms · UTC 12:19 · PVG 20:19 · LAX 04:19 · JFK 07:19
    ♥ Do have faith in what you're doing.