网页中的公式在翻译时如何被保留下来？

我们在阅读外文文献时，有些文献是有网页在线版本的。然后网页有翻译功能，可直接将英文翻译成中文，但同时，文中的一些公式也被翻译了，阅读起来就很难受。

被翻译乱掉的公式

因此，这就产生一个问题：

怎么样在翻译网页的同时，保留公式，只翻译文本？

translate 属性

在网页中，早就规定了一个专门用于翻译的元素属性，叫做 translate 。

<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>

https://www.w3school.com.cn/tags/att_global_translate.asp

因此要防止元素被翻译，则需要增加这个属性。

MathJax

目前，网页上的公式大多是通过 MathJax 生成的。

其生成的公式如果不是 SVG 格式的话，便会以大量的 <span> 来呈现。然后会加上相应的 id 或 class 。

这里最外层包裹着的就是 class="MathJax" 这样的了。

网页中的公式

而且，大部分的元素，命名都是有规律的。所以说要定位到他们并不难。

公式翻译保留方案

由前面的介绍，可以得出一个公式翻译保留方案：

网页打开后，首先定位到由 MathJax 生成的公式元素；然后给他们增加 translate="no" 这个属性；最后再进行网页翻译。

简单实现

借助 JQuery 来简单实现：

$('math, .math, .MathJax').attr('translate','no');

临时方案

所以，一个临时方案是，打开要翻译的网站，等网页加载完毕后，按 F12 调出控制台，然后输入上面的代码，再翻译（一般来说，网页都都会引入 JQuery 这个库的）。

控制台临时方案

油猴脚本

当然，每次这么手动是很繁琐的，为了更好的偷懒，可以把代码写成 油猴脚本 。

油猴脚本

// ==UserScript==
// @name         公式翻译保留
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  网页翻译时，保留公式
// @author       GShang
// @require      http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js

// @grant        GM_getResourceURL
// @grant        unsafeWindow
// @grant        GM_setClipboard
// @include      https://www.sciencedirect.com/*
// @include      https://ieeexplore.ieee.org/document/*
// @grant        GM_getResourceURL
// @grant        GM_xmlhttpRequest
// @grant        GM_getResourceText
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_download
// @grant        GM_addStyle
// @grant        GM_openInTab
// @noframes     Chrome
// @compatible	 Chrome
// @compatible	 Firefox
// @compatible	 Edge
// @compatible	 Safari
// @compatible	 Opera
// @compatible	 UC
// @license      GPL3 license
// ==/UserScript==

(function() {
    'use strict';


    // 带有公式的元素
    const mathElement ='math, .math, .MathJax';

    // 添加按钮
    var mathBtn = '<button id="math-btn">公式翻译保留</button>';
    $('body').append(mathBtn);

    // 添加样式
    GM_addStyle('#math-btn {background:#ff3500;padding:10px 20px;color:#fff;border-radius:40px 0 0 40px;position:fixed;right:0px;top:50vh;z-index:99999999999999;border:none;height:fit-content;outline:none;cursor:grab}');

    // 点击按钮，添加翻译保留属性
    $('#math-btn').click(function(){
        if($(mathElement).length > 0){
            // console.log('该页面存在公式!');
            // alert('该页面存在公式!');
            $(mathElement).attr('translate','no');
            alert('公式已被保留!');
        }else{
            console.log('未发现公式!');
            alert('未发现公式!');
        }
    })

    // Your code here...
})();

上述代码中，可根据需要增加或修改对应的匹配网站：

// @include  https://ieeexplore.ieee.org/document/*

其中 * 表示匹配该级别下的任意网址。

使用时，也是先等网页加载完毕，然后点击右边的 “公式翻译保留按钮”，再在弹出的窗口中点 “确定” ，最后翻译网页。

点击 "公式翻译保留" 按钮

网页翻译

翻译效果