Show Twitter Image Alt Text

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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 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);

})();