|
|

楼主 |
发表于 2022-11-11 07:33
|
显示全部楼层
本帖最后由 马黑黑 于 2022-11-11 07:38 编辑
本帖主要是试一下蒙古语歌词,做帖过程中发现一些问题:本论坛使用gbk编码,它对蒙古语不是非常支持,尤其是在在特殊处理的时候,若编码为 UTF-8,则会完美支持。
下面解释几个问题:
① 关于歌词同步
蒙古语不好编辑,通过伪元素实现的逐字同步模拟在gbk编码的论坛里也不好处理,所以去掉逐字同步模拟,只同步显示整句歌词。
② 关于八思巴文
帖子左边部分的符号是八思巴文字母,与歌词蒙语不是一个东东(但貌似有一丁点联系)。八思巴文是元朝时期,忽必烈为了统一文字,令元朝帝师、学者八思巴编制的文字,意欲取代汉字,但彻底失败,根本无法推广,仅在官方文件中短暂使用过,八思巴文故而是一门历史语言,像错版的钱币一样额外珍贵(保守估算,左边的符号每一个都约值10.65万刀)。
元,是一个绕不开的历史,八思巴文承载着诸多不堪。
③ 关于播放进度条
进度条使用HTML5标准的进度条标签 progress,它非常简单,最少只需一个属性便能做进度条(将在下楼演示下面的代码):
<progress max="100"></progress>
max设置为100必须,进度量通常都是百分制的好。进度条还应该有 value 值,比如 value="10",表示完成进度为百分之十。
④ 左侧符号布局的实现
用 span 标签装载每一个字符。首先,在CSS设定一下基本的 span 样式:
#papa > span {
position: absolute;
left: -240px;
width: 100%;
height: 100%;
font: bold 1em serif;
display: grid;
place-items: center;
}
其次,用 JS 生成 span 标签,细化 span 标签的样式,同时获取特殊符号,再追加到 papa 父框:
(function() {
let total = 65, rr = 200;
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('span');
item.innerText = String.fromCharCode(43072 + Math.floor(Math.random() * 65));
item.style.cssText += `
color: hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.5 + 0.3});
font-size: ${Math.ceil(Math.random() * 20) + 20}px;
transform: rotate(${Math.random() * 180}deg) translateY(${rr/total * key}px);
`;
papa.appendChild(item);
});
})(); |
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|