尝试做一个读写障碍友好的字体

emu

于 2021-10-08 10:23:37 发布

阅读量333

点赞数 3

文章标签：无障碍读写障碍 opendyslexic

本文链接：https://blog.csdn.net/emu/article/details/120646435

版权

事情是这样的，有一天逛chrome的插件商店，偶然发现了这个好东西：

https://chrome.google.com/webstore/detail/opendyslexic-for-chrome/cdnapgfjopgaggbmfgbiinmmbdcglnamhttps://chrome.google.com/webstore/detail/opendyslexic-for-chrome/cdnapgfjopgaggbmfgbiinmmbdcglnam说是这样头轻脚重的字体，对读写障碍者更加友好

OpenDyslexic logo

原理是这样可以减轻字体在读写障碍者脑中自发的旋转现象。

不过没有发现中文字体的支持。开发一个中文字体肯定是最好的，前人对于汉字的重心问题也有过非常多的研究

字体设计基础论点_重心汉字特有的方块特征,使汉字的大小与块面关系非常密切，在设计汉字时，都是在设定的方框里进行细致的调整,汉字常被认为是追求方寸之间变化的一种艺术。独体字是由基本笔画直接构成的，在所有的汉字中，独体字占…https://www.sohu.com/a/315343175_612927不过看起来还是门槛有一点点高。有没有办法纯技术的改造一下中文字体的显示，让他看起来脚重头轻呢？国庆在小木屋度假的时候做了一个原型实验：

<html>
	<body style="font-size:50px;font-family: sans-serif">
		<div id=output></div>
		<script>
		var t="国庆自驾，这些知识提前了解"
		var output=document.getElementById("output")
		for(var i=1;i<6;i++){
			var s = "<div style='transform:rotateZ(100)'><span>"+t+"</span>"
			for(var j=1;j<=i;j++){
				s+='<span style="margin-left:-'+t.length+'em;transform:scaleY('+(1+j*0.03)+')translateY('+(j*0.4)+'px);display:inline-block;">'+t+'</span>';
			}
			s+="</div>";
			console.log(i+","+j+":"+s)
			output.innerHTML += s;
		}
		</script>
	</body>
</html>

显示效果是这样：

到了最后两行，有一些笔画就开始模糊掉了。那要怎么解决呢

又产生了一个新想法，bold加粗字体本身是考虑了笔画清晰度问题的，如果显示文字的时候font-weight从上到下逐步从light过度到normal再到bold的方式来显示，是不是就可以呈现出头轻脚重笔画又不模糊的字体呢？再做一个实验：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas0" width="1000" height="60" hidden></canvas><br>
<canvas id="canvas1" width="1000" height="60" hidden></canvas><br>
<canvas id="canvas2" width="1000" height="60" hidden></canvas><br>
<div style="font:60px sans-serif">国庆自驾，这些知识提前了解</div><canvas id="canvas3" width="1000" height="60"></canvas><br>
<canvas id="canvas4" width="1000" height="60"></canvas>
<script>
var w=1000;
var ctx0=document.getElementById("canvas0").getContext("2d");
ctx0.font="lighter 60px sans-serif";
ctx0.fillText("国庆自驾，这些知识提前了解",0,50);
var imgData0=ctx0.getImageData(0,0,w,60);
var ctx1=document.getElementById("canvas1").getContext("2d");
ctx1.font="normal 60px sans-serif";
ctx1.fillText("国庆自驾，这些知识提前了解",0,50);
var imgData1=ctx1.getImageData(0,0,w,60);
var ctx2=document.getElementById("canvas2").getContext("2d");
ctx2.font="bold 60px sans-serif";
ctx2.fillText("国庆自驾，这些知识提前了解",0,50);
var imgData2=ctx2.getImageData(0,0,w,60);
var ctx3=document.getElementById("canvas3").getContext("2d");
var imgData3 = ctx3.createImageData(w,60);
var ctx4=document.getElementById("canvas4").getContext("2d");
var imgData4 = ctx4.createImageData(w,60);
var g=30
for(var y=0;y<60;y++){
	var r1=1-Math.abs(y-g)/g
	if(r1<0)r1=0
	if(r1>1)r1=1
	var r0=y<g?(1-r1):0
	var r2=y>g?(1-r1):0
	for(var x=0;x<w;x++){
		var p = (y*w+x)*4;
		imgData3.data[p+3] = imgData0.data[p+3]*r0+imgData1.data[p+3]*r1+imgData2.data[p+3]*r2
	}
}
ctx3.putImageData(imgData3,0,0)
var g=20
for(var y=0;y<60;y++){
	var r1=1-Math.abs(y-g)/g
	if(r1<0)r1=0
	if(r1>1)r1=1
	var r0=y<g?(1-r1):0
	var r2=y>g?(1-r1):0
	for(var x=0;x<w;x++){
		var p = (y*w+x)*4;
		imgData4.data[p+3] = imgData0.data[p+3]*r0+imgData1.data[p+3]*r1+imgData2.data[p+3]*r2
	}
}
ctx4.putImageData(imgData4,0,0)
</script>
</body>
</html>

显示效果是这样

重心下移的不够明显。似乎帮助不大。

看来代码能做的有限，重新设计字体调整汉字重心可能才是正道。

希望后面还能有更好的idea。

emu

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
尝试做一个读写障碍友好的字体

事情是这样的，有一天逛chrome的插件商店，偶然发现了这个好东西：https://chrome.google.com/webstore/detail/opendyslexic-for-chrome/cdnapgfjopgaggbmfgbiinmmbdcglnamhttps://chrome.google.com/webstore/detail/opendyslexic-for-chrome/cdnapgfjopgaggbmfgbiinmmbdcglnam说是这样头轻脚重的字体，对读写障碍者更加友好
复制链接

扫一扫