如何写出扩展性良好的前端代码(揭秘前端字符的戏精之路)
如何写出扩展性良好的前端代码(揭秘前端字符的戏精之路)
2024-11-22 06:51:46  作者:尔等平身  网址:https://m.xinb2b.cn/know/gir493506.html


前言

编码,是每个程序员绕不开的话题。对于前端工程师而言,字符更是会直观地展示在界面上。

提起文字,大部分人的脑中,都会定式为规整排列的字符。但是林子大了什么鸟都有,世界上可是存在着6800 种文字,难免会飞出来一些诡异的鸟…

而号称“万国码”的Unicode,在实现编码与展示的时候,也会不会遇到一些奇葩的事情呢?

事实上,可能你早已见识过了:

x̙͈̝͍͕̙̄͛̽̆͌́̕͟g̘̣̠̝̟̤̥̼̼̽͑͋̈̑̒͟͞q̛̤̦̝̘͎͋̔̋͌͒̆̋̚͡f̵̢̙͇̮̠̋̀͌̅̉̃̔͜͜͠͡r̢̜̩͙̭̲͓͈̈̀͑̆͋̚͢͜m̷̛͙̝̣̲̭͍͉̊̓̾̈̋̿̚͢͟͠s̷̡̩͔̮͈̜̊̽͂̆̈́̃̓͋̏

热҈的҈字҈都҈出҈汗҈了҈

你的屏幕被蓝翔挖掘机给挖坏了不信你看;̷̸̨̀͒̏̃ͦ̈́̾̀́̎͢҉̵̶͚̼͉͖̺̥͔͇̰̹̮͙͉̻̼̭̻͕̮͇ͨͬͪ͗̇̑̽͋̀̋̊͌ͧͨͭ̓̅͐ͥ̂̔̊ͧ͊҉̶̵̷̞̩̦̳̺̳̬̬̩̣̫͇̯̥͖͍͕̠̦̼̗ͯ̽͌̔ͪͯ́́͋̍ͨ̿̿̎͒ͤ̓̅̀͂ͧ͋̏ͫͣ̔͘͜͠͏̶̵̸̧̧̥̺͓̘̺͎̜̥͕͈̝̫͎̺̮̱̤̠̠͖̳̻̥̣̪͍͕͇̮͙̹̪ͮͧͫ͂͒ͤͣ̌̽ͨͪ͒̄̄̉̒̊ͩ̅͆͘̚͘͘̚͟͟͝ͅ

今天我们就来探讨一下这些奇怪的字符。

一、文字可以戴帽子和穿鞋子

提起泰文,很多朋友都会立即想到:萨瓦迪卡(你好)。

但这句话是怎么写的呢?

其实这句你好,男生和女生之间还有差异,男生写法是:สวัสดีครับ,女生则是:สวัสดีค่ะ

不过这并不重要,重要的是,我们发现某些字的上面,还带了特殊的符号。就好像是戴上了帽子。

事实上,泰文字符不仅会“戴帽子”,偶尔还会“穿鞋子”。

比如下面三个字符:ผ ผู ผู้

如果脑洞再大一点,有人就会想,那是不是还可以戴多顶帽子呢?

的确如此…泰文允许你穿一双鞋子,并且戴两顶帽子。完整的形式是这样的:


所以,平时看惯了中英文的我们,需要改变一下思路了。

世界上的文字,并不全是规规整整横向排列的格子,也存在像泰文这种变形金刚组合式的文字。

虽然标准的泰文里,“帽子”和“鞋子”的数量是有限制的,但由于国际码的迷之设计(先卖个关子),在计算机里显示的泰文字符,却可以拥有无数的帽子和鞋子。也就是说,它变成了一款可以在Y轴无限拓展的文字!

并且,咱不光可以往上喷,还可以有一定角度…



还可以


,简直是不讲道理。

(由于一些系统会崩溃,这里使用截图)

二、人与机器的矛盾

然后我们会质问Unicode,你为何不讲道理?

如此的设计,近乎是一个bug;但即使是bug,也应该早就修复了呀。

事实上,这样的设计,是为了解决一个问题:人与机器的矛盾。

首先是存储的矛盾。

如果把每个组合好的泰文用一个编码来表示,那么至少需要44×21×4=3696个编码(实际上可能要比这还多)。用如此多的编码来处理基本元素只有69个的文字是非常浪费的,因此电脑采用一套称为复杂文字编排(CTL)的设计来解决矛盾。

简单的说,泰文的每个基本字符对应一个编码,用户在输入法里依次输入多个基本字符进行拼合,最后敲一个特殊的“结束字符”;这时前面输入的基本字符,就拼合成了一个单独的泰文字符,在屏幕中显示。 这样就解决了存储的空间浪费问题。

但这样就带来了第二个矛盾,识别的问题。

人可以轻松地识别一个泰文合字是否拼写正确、有意义;但机器在显示时却很难进行判断,即使可以也会带来相应的性能问题。

如何解决呢?如今会在输入法上做一些文章,比如打一个声调符号后就不能再输入了。不过,由于泰文这种基于结束标志合成字符的本质,你还是没法避免“艺术家”们使用复制粘贴、手工撰改字符位置等方式去进行创造,只能起到一些限制作用。

其次,在比较新版本的Webkit里,在显示上会阻止这种往上下冒的字符,这样至少不影响排版。所以有部分字符已经不会出现上下叠加的情形了,你可以在不同浏览器,观察一下这个字符的显示:ส็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็็

三、萌即正义的颜文字 (ง •̀_•́)ง

也许你觉得泰文奇葩,但它的声调就在文字里,看到就能准确地读出来。这样更容易传播,是不是也没了你读文言文要查字典的烦恼呢?所以文字的设计各有优劣。

这样的设计不止泰文,它只是一个典型的例子。除此之外常见的还有老挝文、藏文。

脑洞大开的艺术家们,又会想到另外一个好玩的事情:我能不能拿老挝文的“帽子”,组合“藏文”的鞋子,合成一个独立的字符呢?

他们赢了。不久,颜文字开始流行。

比如,这个表情:(;´༎ຶД༎ຶ`)

里面有眼睛流泪的一个字符:༎ຶ

它是什么语言呢?

事实上,它并不属于世界上任何一种语言!眼睛部分是老挝文,泪水部分属于藏文。

但是,你在复制它的时候,可以发现它却是一个单独的字符,这就非常的神奇。原因我们在第二部分已经讲过了。

我是如何知道的呢?当然我并不是个语言学家,我们可以转码一下,发现༎ຶ对应的编码是\u0f0e\u0eb6,再到 unicode-table 里去查看就清楚了。

除此之外——

▷ˋε´◁ 中 ε 是希腊字母

ʕ-'ᴥ’-ʔ 中 ʕᴥʔ 是国际音标

(·ཀ·」∠) 中 ཀ 是藏文

(ง •̀_•́ )ง 中 ง 是泰文

罒 д 罒 中 罒 是中文(同网),д 是俄语西里尔字母

看来如果你会发颜文字,就是名副其实的会“十八国语言”了呢 (๑✦ˑ̫✦)✧

四、字体的错位

前面我们一直在谈字符的本质,但字符在屏幕中的展示,还有一个关键的因素:字体。

相同的字符,使用了不同的字体,它们的显示也会有差别。

一行中文,你设置“黑体”或“草书”,它大体来看还是规整的;

但如果你设置一行英文为“草书”,可能就会有问题。

在浏览器里,如果对应编码在字体文件里为空,一般会展示成一个方格,起码不会影响其他正常字符的排版。但我们知道,Unicode的林子实在太大了…

在某些字体里,就会对一些特殊的字符产生错误的排版。

比如:热҈的҈字҈都҈出҈汗҈了҈

把它转义一下,就得到编码是: \u70ed\u0488\u7684\u0488\u5b57\u0488\u90fd\u0488\u51fa\u0488\u6c57\u0488\u4e86\u0488

其中0488就是҈这个字符的编码,它是一个组合用的西里尔文百千符号。

它在大部分常用字体里,都有错位问题;而其他一些字体,比如 Courier New 字体,则是分开的展示:


那么,这两种展示哪种才是正常的呢?其实都不正常。

我们查看西里尔文计数法的wiki,可以看到它只有配合西里尔数字时,才能展示正常:


至于你把它跟其他语言组合在一起时,我们要么看到错位,要么看到分离的展示。而且国际上并没有一个组织,去规定要怎么展示。事实上文字这么多,根本也管不过来,所以这也是混乱的原因。

最后补充一点,另外一小撮别有心裁的艺术家,还习惯使用这个字符去突破敏感词过滤…

五、混乱与创新?

值得一提的是,Unicode是不可阻挡的潮流,它也一直在更新。比如我们常用的Emoji表情,就已经是Unicode的标准字符集。

而前面我们说到,大家在玩这些奇奇怪怪的字符时,都是基于“类似bug”的设定在搞事情。这就有很大的局限性。

那“艺术家”们又会有些大胆的想法:我能不能主动创造一些新字符,就是为了错位和组合呢?

我也不清楚这是创新,还是会带来更多的混乱。但事实是,iOS系统自带的字符,已经有这样的尝试了。并且搜狗输入法在iOS系统提供的诸多符号里,挑选了一些,可供用户去使用。这个功能的名字,叫做花漾字。


还是得感慨艺术家们的视角是多么独特。

既然都这样了…最后,希望我们的国产表情包能有朝一日打入Unicode吧。


免责声明:转载自网络 不用于商业宣传 版权归原作者所有 侵权删

  • 螃蟹怎么清洗干净小技巧(手把手教你螃蟹的正确清洗方法)
  • 2024-11-22手把手教你螃蟹的正确清洗方法众所周知,螃蟹味道鲜美,营养丰富但是螃蟹不好清洗,尤其是邕鲜记的青蟹花蟹,个头又大、又鲜活生猛,大大的钳子看着就令人害怕那怎么清洗呢?小鲜教你~螃蟹清洗方法一首先准备半盆清水和一把旧牙刷放入要清洗的螃。
  • 新颖有涵养的最新男孩名字(新颖有涵养的男孩名字)
  • 2024-11-22新颖有涵养的男孩名字新颖有涵养的最新男孩名字:宇诚、鼎哲、鸿杰、泰润、君谦翰辰、德欧、晋尚、苑星、涛雨圣原、博嘉、智新、文尚、冠泰荣瀚、泰信、浩气、晋唯、文冠柏城、若菲、安皓、俊康、志佑星柯、利元、博恩、浩强、胜日浩凯、。
  • 12306怎样查看晚点信息(可查询正晚点等)
  • 2024-11-22可查询正晚点等原标题:可查询正晚点信息、起售时间12306手机客户端新增四项功能晨报淄博12月3日讯(记者张培报道)日前,有市民发现,铁路12306手机客户端悄然发生变化,在其首页顶部新增了正晚点、温馨服务、起售时。
  • 自助冻结可以解冻吗(冻结解冻功能你知道多少)
  • 2024-11-22冻结解冻功能你知道多少各位亲爱的小伙伴:有小伙伴跟小天反映,问小天什么时候能够在咱们腾讯游戏安全中心微信公众号上增加手游相关的功能为了响应大家的需求,咱们腾讯游戏安全中心微信公众号的冻结解冻功能现已支持部分手游啦!剑侠情缘。
  • 二十年前邢台有几个区(你不一定知道邢台各县市名称的由来)
  • 2024-11-22你不一定知道邢台各县市名称的由来邢台,作为一个历史悠久的城市,上古时期黄帝在邢台干言岗(轩辕丘)建井田,筑邑而居,史称“黄帝凿井,聚民为邑”上古时期,尧帝晚年曾建都于柏人城(邢台市隆尧西)在此禅位于舜,大禹为治理洪水,曾疏导九河之水。
  • 2022长沙第四批公交线路调整方案(长沙郑州城铁公交化运营)
  • 2024-11-22长沙郑州城铁公交化运营武咸城际铁路因为与京广高铁、京广线走向一致,且车次少、耗时长,一直以来都饱受诟病咸宁也规划了武咸市域铁路,通过市域铁路实现武咸两地快速到达,如果能改造现有的武咸城际铁路,不仅能增加其利用率,还能省去市。
  • 18个月孩子咳嗽听见呼呼声音(八月龄幼儿反复咳嗽7个月)
  • 2024-11-22八月龄幼儿反复咳嗽7个月供稿:江西省儿童医院通讯员:魏美娟王欢宝宝反复咳嗽,吐奶,你会想到什么?感冒?咽炎?过敏?吸入异物?近日,江西省儿童医院呼吸科专家接诊了一例患儿,仅八个月龄,却是有7个月反复咳嗽病史的“老患者”出生在。
  • 金秀贤崔雪莉 高能(崔雪莉主演的电影Real刚举行媒体试映会)
  • 2024-11-22崔雪莉主演的电影Real刚举行媒体试映会由金秀贤、崔雪莉主演的电影《real》在6月29日下午刚举行媒体试映会,只因为一个镜头就迅速占领话题榜榜首《Real剧照》《Real》是一部典型的韩国特色黑帮犯罪电影,影片讲述一个关于亚洲最大规模赌场。
  • 蒙面唱将猜猜猜飘雪谁唱的(爱许愿的花仙子)
  • 2024-11-22爱许愿的花仙子在上周日晚播出的《京都念慈菴•蒙面唱将猜猜猜》里,“爱许愿的花仙子”黄霄雲惊喜揭面风中有朵雨做的云,而《蒙面唱将猜猜猜》中有朵面包做的云这朵云究竟有何玄机,快让我们来一探究竟!云里有音符还记得那首活力。
  • iphone6s深度评价(iPhone6sPlus详细评测不单单是多了玫瑰金)
  • 2024-11-22iPhone6sPlus详细评测不单单是多了玫瑰金继iPhone5s之后,iPhone6s/6sPlus又一次在中国大陆首发,因为苹果采用了预约邮寄或者到店自取的购买方式,一定程度上限制了黄牛直接从苹果官方渠道囤货,加之苹果此次备货较多,不少网友都发。
  • 国产手机屏幕玻璃怎么样(这款摔不烂的手机屏幕玻璃)
  • 2024-11-22这款摔不烂的手机屏幕玻璃针对手机屏幕易碎这个痛点,日前举行的华为Mate50发布会上,华为常务董事余承东介绍——Mate50Pro昆仑版使用的华为昆仑玻璃,获得业界首个瑞士SGS五星抗跌耐摔认证,整机耐摔抗跌落能力相比普通玻。