polyglot icon indicating copy to clipboard operation
polyglot copied to clipboard

Translation doesn't show in MacOS Safari's "Reader View"

Open nitram9 opened this issue 5 years ago • 0 comments

When in Reader View, right clicking on a word or phrase brings up the contextual menu. "Translate" is an option, however, it does not show over the Reader View. This may be a limitation as Reader View in Safari seems to generate an HTML page. The polyglot translation would therefore have to hover over the processed HTML and not just the regular website.

Some information about how the Reader View works is presented here: https://mathiasbynens.be/notes/safari-reader-htmlv

Customizing the Safari Reader UI with JavaScript and CSS

Because Safari Reader is HTML-based, you can easily write your own CSS to be used instead of the default one.

For example, try running the following JavaScript code from the console after opening Reader to greatly improve its usability and general awesomeness:

(function(d) {
	var s = d.createElement('style');
	var c = '#background{background:#f773b5 url(https://i.imgur.com/bB7aD.jpg)}h1.title,.page{font-family:"Comic Sans MS"!important}';
	c += 'h1.title{color:#f773b5}.page{background:rgba(255,255,255,.9);-webkit-animation-name:f;-webkit-animation-duration:5s;';
	c += '-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}@-webkit-keyframes f{';
	c += '0%{-webkit-transform:rotate(0) scale(1)}25%{-webkit-transform:rotate(-4deg) scale(.95)}50%{-webkit-transform:rotate(0) scale(1)}';
	c += '75%{-webkit-transform:rotate(4deg) scale(.95)}100%{-webkit-transform:rotate(0) scale(1)}}';
	s.appendChild(d.createTextNode(c));
	d.head.appendChild(s)
}(document));

Much better, right?

nitram9 avatar Jan 21 '20 13:01 nitram9