浏览器内中文两端对齐的完美实现

之前提到过chrome已经支持中文的两端对齐了,事实上,目前大多数浏览器,如果是新版本,都没有问题。无奈,手机配置低,终究还是换回了系统自带的。然后,我发现,它不支持中文的两端对齐,强迫症受不了啊。

目前网上没发现有什么完美的方法,不过有一篇文章比较有参考价值,即在所有字符之间插入空格,然后使用letter-spacing的负值属性,隐藏掉这些空格。这样,中文之间有了空格,相当于一个个单词了,自然就可以两端对齐了。

不过,这个方法并不完美,因为如果内容里面包含html标签,比如链接,插入空格就无效了,所以要排除html标签。而且,如果内容含有html字符实体,也会被打散,失去作用,比如“©”,本来应该显示版权符号“©”,插入空格就直接输出“©”了。

所以,最好只在中文字符间插入空格,这样不会影响html实体。可是,没插入空格的英文单词,字母之间没有空格,在letter-spacing为负值时,字母不就重叠了么?没关系,我们可以改用word-spacing,这样只缩减单词间的距离。同时,由于html中,连续的空格默认显示为一个,为了避免原本就存在的空格缩减后不明显,导致英文单词连在一起,可以加入span标签,单独设置这些空格的letter-spacing为正值。

那么,最终的js实现如下(可以使用低端浏览器看我的博客效果,欢迎反馈修改,共同完善):

//注意,请保证符合html规范,标签闭合,单独的尖括号请用html实体表示。如,p标签内不能含有div标签,否则获取innerHTML时可能出错。

//请保证p标签已经添加属性 “text-align: justify; text-justify: inter-ideograph;”。

//该方法会使复制的内容包含大量空格,不过这不正好可以防止简单抄袭么?

<script>
var allp=document.getElementsByTagName('p');//选择所有p标签
var i=0;
for(i=0;i<allp.length;i++){//对于每一个p标签
    var allchar=allp[i].innerHTML.split('');//将p标签内容的所有字符打散
    var j=0;
    var istag=false;//标识是否属于标签内部'<***>'
    var isch=true;//标识是否是中文,作用是判断下一个字符前是否需要加空格
    for(j=0;j<allchar.length-1;j++){
        if(allchar[j]=='<'){//标识标签的起始位置
            istag=true;
        }else if(allchar[j]=='>'){//标识标签的结束
            istag=false;
        }else if(istag==false){//对于标签'<>'以外的字符
            if(/[\u4e00-\u9fa5]/.test(allchar[j])){//如果是中文
                if(isch==true){//如果前一个字符也是中文(或空格,见下),它前面就已经有空格了,不再添加
                    if(allchar[j+1]!=' '){//如果后一个字符是空格,那么它后面也不用加空格了,因为按照规则,紧邻的空格,后面的全都无效
                        allchar[j]=allchar[j]+' ';
                    }
                }else{//如果前一个字符不是中文(或不是空格),则它前面应该没有空格,加一个
                    if(allchar[j+1]==' '){//同上,判断后面是不是空格
                        allchar[j]=' '+allchar[j];
                    }else{
                        allchar[j]=' '+allchar[j]+' ';
                    }
                }
                isch=true;//更新中文标识
            }else if(allchar[j]==' '){
                allchar[j]='<span style="letter-spacing:.5em;"> </span>';//对于本来就存在的空格,为避免word-spacing的负值导致空格不明显,这里单独调大空格的占位宽度
                isch=true;//既然这里有了空格,那么后面就不需要再有了,所以将isch标志改为true
            }else{
                isch=false;//更新中文标识
            }
        }
    }
    allp[i].innerHTML=allchar.join('');//将打散的字符再次拼接,作为p标签的内容
    allp[i].style.wordSpacing='-.15em';//设置p标签内的单词间距为负,变相隐藏中文间添加的空格,注意,不是字母间距,因为字母间没有空格
}
</script>

随便看看

本文共有4条评论

    1. 这个可以修改word-spacing的值调整,现在已经改为-0.2em,因为要照顾到不同字体,绝对值不敢太大。
      其实我觉得字间距大了一点反而更舒服,个人看法而已。

你好,哪位? 填写