探索在网页中使用“标注”

说起“标注”,在HTML5之前,你可能想起的是各种浏览器插件,emmmmmmm或者说你根本不认为浏览器上可以有这种玩意。

但是HTML5来了,这是它的时代。

我们完全可以不借助CSS、JavaScript的力量实现这个东西 —— 因为浏览器实现了 <ruby></ruby> 这个神奇的标签:

<ruby>
<rb>中文</rb>
<rp>(</rp><rt>zhongwen</rt><rp>)</rp>
</ruby>

它是这样表现的:
探索在网页中使用“标注”
据说在不支持ruby的浏览器中也能这样适应:
探索在网页中使用“标注”

除此之外,随着前端的发展,CSS3也给我们带来了“惊喜” —— 文字强调装饰 text-emphasis
text-emphasis家族总共有4个CSS属性,分别是:

    text-emphasis
    text-emphasis-color
    text-emphasis-style
    text-emphasis-position

其中,text-emphasistext-emphasis-colortext-emphasis-style这两个CSS属性的缩写,注意,并不包含text-emphasis-position属性,text-emphasis-position属性是独立的!

比如:

<p id="p">aishfaoihfoiahfoahdfoiahfdoshoigsoidshioshghudsihfisjhiodshoishoighdihishoighsoiv</p>

//css
color: red;
-webkit-text-emphasis-style: '·';
text-emphasis-style: '·';
-webkit-text-emphasis-color: red;
text-emphasis-color:red;
-webkit-text-emphasis-position:under;
text-emphasis-position: under; /* 这里还能是over(上方),不过最好加上left/right组合使用! */

它是这样表现的:
探索在网页中使用“标注”

稍稍有些小遗憾的是:它不能“针对每个字体设置不同的重点标志”,所以常常只用来做辅助突出功能

笔者一直认同的是:能用HTML完成的就不用CSS,能用CSS的就不用JS。并在日常实践中愈发觉得这是一条“至理”!

那么问题来了,现在我想实现这样一个功能:现在的「网页翻译」大多是“页面整体翻译”或者“弹框拖入”,少部分是“选中文字后在文字旁弹出一个提示框”,但是这几种方式不管是哪一种都会有一丝丝的影响:比如遮挡页面其余内容、精确度不高等等。
那能不能“当用户选中文字后在选中文本下方有突出强调、在文本上方出现翻译”呢?

(这个笔者在本文先不说,以免造成“长篇大论”,本文只把实现的基础知识全盘托出!)

首先是HTML:这里我们简单的做一个p标签:

<p id="p">aishfaoihfoiahfoahdfoiahfdoshoigsoidshioshghudsihfisjhiodshoishoighdihishoighsoiv</p>

笔者的思路是:当用户鼠标“抬起”时,去判断有没有选中文本,如果没有则啥事没有、反之则要将这一部分选中的文本替换成标签!

p.onmouseup=function(e){
var txt = window.getSelection();
console.log(txt)
var selectStr = txt.toString();
console.log(selectStr)
if(selectStr!==''){
replaceSelectedStrByEle(txt,selectStr,'nite-writer-pen')
}
}

这里 window.getSelection() 是浏览器API,专门用于获取用户选中的文本,其具体值用 .toString() 即可获得。

/**
* 用元素替换被选中的文本
*/
var replaceSelectedStrByEle = function(selecter,selectStr,className){
if (selectStr.trim != "") {
var rang = selecter.getRangeAt(0);
var ele = document.createElement("span");
ele.style.cssText="-webkit-text-emphasis-style: '·';text-emphasis-style: '·';text-emphasis-color:red;-webkit-text-emphasis-position:under;text-emphasis-position:under";
ele.className = className;
ele.textContent = selectStr;
rang.surroundContents(ele);
}
}

selecter.getRangeAt(0):selection API是将每次选中的都保存到内部的数组里,而且是最新的保存到第一个这样的顺序。
没错这里就是用的 -webkit-text-emphasis 突出强调符 —— 如果要为某个元素一次添加多个样式,cssText可以优化性能!

受笔者“信奉”准则的影响,其实在这里一开始还想用纯CSS的 伪类::selection 去做突出强调,但是很不幸的是:这个伪类里面只能改变选中文字的颜色相关:如背景颜色、字体本身颜色。其他的什么都改变不了(不知道为啥,感觉很奇怪:虽说它是子选择器行为,但是其影响应该是和display之流是一样的,并不会产生太大的变动)。诸君请看:
探索在网页中使用“标注”

探索在网页中使用“标注”

(如上图)至此,选中状态已经差不多了 —— 至于没说的翻译,这里如果你没有足够的能力建一个“词库”,那么我还是建议你启用“第三方库/插件”或者在线翻译API。这里还有一个问题是:在笔者实践过程中发现,ruby标签是没有办法嵌套在行内元素中的:它会带着其内包裹的文字消失不见 !这一点一定注意。
(估计是因为ruby是一个块级元素吧:w3c规定——行内元素中不能放块级元素,块级元素中虽然能放其它块级或行内元素,但是p标签例外;很尴尬,这两点本文情况全占了)

好了,你总不能让用户一直处于这个状态吧。那就要在一定情况下取消上面的状态 —— 这里笔者也遇到了一些“奇葩”问题:

    什么时候结束选中状态?
    我建议,在点击页面其余空白地方时改变状态 —— 因为为了更好的体验,上面选中使用的mouseup:这里涉及到一个“浏览器事件触发的优先级”。你可以让文本处于“高zIndex区域”、或者用JS去隔离。

    怎么取消?
    对这个才是大问题:你这里可能“理所应当的”想到了“把元素的标签去掉不就完了”,这里你可以尝试一下,可不是一件简单的事。一开始笔者想到了 将dom再转化回string,但是随即想到了这个string怎么插入到父p标签中,而且要插入到原位置!

辗转了一上午,想到了一个“取巧的方法”:因为选中的文本已经是一个dom了,将选中的文本都转化为string,然后再用字符串替换替换掉父p标签的innerText内容的相同之处!~

/**
* 将dom转化为字符串
*/
function nodeToString ( node ) {
//createElement()返回一个Element对象
var tmpNode = document.createElement( "div" );
//appendChild() 参数Node对象 返回Node对象 Element方法
//cloneNode() 参数布尔类型 返回Node对象 Element方法
tmpNode.appendChild( node.cloneNode( true ) );
var str = tmpNode.innerHTML;
tmpNode = node = null;
return str;
}

mxc.onclick=function(){
if(document.querySelector('p .nite-writer-pen')){
let p=document.querySelector('p .nite-writer-pen').parentNode
let nite=document.querySelector('p .nite-writer-pen')
console.log(nite)
console.log(p)
p.innerText=(p.innerHTML).replace(nodeToString(nite),nite.innerText)
}
}

探索在网页中使用“标注”

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

探索在网页中使用“标注”

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 探索在网页中使用“标注”
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏