aboSamoor / polyglot

Multilingual text (NLP) processing toolkit
http://polyglot-nlp.com
Other
2.32k stars 338 forks source link

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

Open nitram9 opened 4 years ago

nitram9 commented 4 years ago

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?