Show Twitter Image Alt Text

Montre le texte alternatif des images publiées sur Twitter quand disponible

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Show Twitter Image Alt Text
// @name:en     Show Twitter Image Alt Text
// @namespace   Violentmonkey Scripts
// @match       https://twitter.com/
// @include     https://twitter.com/*
// @grant       none
// @version     2.1
// @author      Antonin Roussel 2020 / Adrian Roselli 2019
// @description Montre le texte alternatif des images publiées sur Twitter quand disponible
// @description:en Show Twitter image alternative text when available.
// ==/UserScript==

(function(){
var a=document.createElement('style'),b;
document.head.appendChild(a);
b=a.sheet;

// Au survol images miniatures, afficher le texte alternatif (aria-label) écrit en blanc sur fond sombre 
b.insertRule('a[role=link]:hover div[aria-label]::after{'+
    'content:attr(aria-label);'+
    'display:block;'+
    'overflow-y:scroll;'+
    'background-color:rgba(0,0,0,.8);'+
    'color:#fff;'+
    'font-size:smaller;'+
    'font-family:\'Segoe UI\',-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\'Helvetica Neue\',sans-serif;'+
    'padding:.5em;'+
    'max-height:calc(100% - 0.5em * 2);'+
    'position:absolute;'+
    'bottom:0;'+
    'left:0;'+
    'right:0;'+
    'z-index:1'+
  '}',0);

// ?
b.insertRule('a[role=link] div[aria-label][style*=margin-left]::after{left:60%}',0);

// ?
//b.insertRule('[dir=auto]>svg{display:none}',0);

// ?
b.insertRule('a[role=link] div[aria-label]{display:contents;margin-top:unset !important;margin-bottom:unset !important}',0);

// Au survol images plein écran, afficher le texte alternatif (aria-label) écrit en blanc sur fond sombre 
b.insertRule('ul[role=list] li[role=listitem] div[aria-label]:hover::after{'+
    'content:attr(aria-label);'+
    'display:block;'+
    'overflow-y:scroll;'+
    'background-color:rgba(0,0,0,.8);'+
    'color:#fff;'+
    'font-size:smaller;'+
    'font-family:\'Segoe UI\',-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,\'Helvetica Neue\',sans-serif;'+
    'padding:.5em;'+
    'max-height:calc(100% - 0.5em * 2);'+
    'position:absolute;'+
    'bottom:0;'+
    'left:0;'+
    'right:0;'+
    'z-index:1'+
  '}',0);
  
// Ne pas masquer les boutons de navigation 
b.insertRule('div[aria-label][role=button]::after{'+
    'display:none;'+
  '}',b.cssRules.length);
  
// Ne pas afficher de texte alternatif pour le peu d'information qu'apporte la mention "Image"
b.insertRule('a[role=link]:hover div[aria-label="Image"]::after{'+
     'display:none;'+
  '}',b.cssRules.length);
  
// Ne pas afficher de zone de texte alternatif quand il n'y a pas de texte
b.insertRule('a[role=link]:hover div[aria-label=""]::after{'+
     'display:none;'+
  '}',b.cssRules.length);
  
// Ne pas altérer la cloche de notifications (peu mieux faire)
b.insertRule('a[role=link]:hover div[aria-label$="non lus"]::after{'+
     'display:none;'+
  '}',b.cssRules.length);
  
// Cacher le marqueur ALT qui indique la présence d'un texte alternatif, mais qui en masque aussi une partie 
b.insertRule('a[role=link]:hover > div:nth-child(2){'+
     'display:none;'+
  '}',b.cssRules.length);

})();