【デスクトップ版】Webページの翻訳する要素の対象について

aker506

【デスクトップ版】Webページの翻訳する要素の対象を制限してほしい

概要

はじめまして。白山です。

いつも快適にVivaldiを利用させていただいています。

デスクトップ版のWebページ翻訳について下記の要望があります。

要望内容: Webページの翻訳する要素の対象を制限してほしい
要望理由: API系のドキュメントの可読性が落ちる可能性があるため

環境

OS: Windows 11 Version 22H2 (Build 22621.3007)
Vivaldi: 6.6.3238.3 (公式ビルド) (64-bit)
Microsoft Edge: 120.0.2210.144 (公式ビルド) (64 ビット)

内容

経緯

ここ数週間海外のAPI仕様書などをVivaldiのページ翻訳機能を使用して翻訳しながら閲覧している際に気づいた事象です。

各種テキストエディタのような見た目で整形されたコードの見本を翻訳させたところ、コード内のキーワード等も翻訳されてしまい、著しく可読性が下がった状態になっていました。

コードが翻訳された画像

Components: <Link> | Next.js
Enable fast client-side navigation with the built-in next/link component.
https://nextjs.org/docs/app/api-reference/components/link

検証

私の環境でのVivaldiとEdgeにおいて下記htmlファイルを開いて動作を確認しました。

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<title>title</title>
	</head>
	<body>
		<p>Normal element text</p>

		<p translate="no">Text of elements with the translate attribute set to no</p>

		<pre>
			<code>
console.log('Text in the Code element within the Pre element. Normally not translated.');
			</code>
		</pre>

		<pre>
			<code>
<div class="line">// Elements inside the Code element in the Pre element. Each line is enclosed in a DIV element.</div>
<div class="line">// This is often what it looks like when it's styled in API documentation and such.</div>
<div class="line"></div>
<div class="line">import React, { ReactNode } from 'react';</div>
<div class="line"></div>
<div class="line">const MyButton: React.FC&lt;MyButton.Props> => (props) => {</div>
<div class="line">	const { children } = props;</div>
<div class="line"></div>
<div class="line">	const { onClickMyButton } = useMyButton();</div>
<div class="line"></div>
<div class="line">	return (</div>
<div class="line">		&lt;button onClick={ onClickMyButton }>{ children }&lt;/button></div>
<div class="line">	);
};</div>
<div class="line"></div>
<div class="line">namespace MyButton {</div>
<div class="line">	export type Props = {</div>
<div class="line">		children: ReactNode;</div>
<div class="line">	};</div>
<div class="line">};</div>
<div class="line"></div>
<div class="line">export default MyButton;</div>
			</code>
		</pre>
	</body>
</html>

画像の左側がvivaldi、右側がEdgeで閲覧したものです。

翻訳前
VivaldiとEdgeにおける翻訳前の状態

翻訳後
VivaldiとEdgeにおける翻訳後の状態

見たところ、translate属性の値は読み取られておらず、pre, codeの子孫要素のテキストノードは通常のテキストとして翻訳対象になってしまっているようでした。

おわりに

用途に応じてブラウザを使い分ける、気合で原文を読む、部分的に翻訳サービスを利用する、などで本来の目的を達成することはできているため不具合ではなく要望として投稿させていただきました。

拙文ではありますがご検討いただければと思います。

ahojo

@aker506

投稿ありがとうございます
本件は、特定の要素が翻訳されてしまう/されない不具合として、社内にて進捗を管理中となっています。

【デスクトップ版】Webページの翻訳する要素の対象について

【デスクトップ版】Webページの翻訳する要素の対象を制限してほしい

目次

概要

環境

内容

経緯

検証

おわりに