diff --git a/README.md b/README.md index 31a1376..9f64ed8 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,12 @@ A set of custom CSS rules to make alt-text visible on Twitter's desktop web inte ## Important Note -This userstyle _only_ works if your Twitter UI language is set to English. -Images without alt-text are given a placeholder alt-text of "Image" by Twitter, but this is localized if you're using Twitter in a different language. +Configuration needed if your Twitter UI language isn't set to English. -However, it should be possible to adapt the style by finding out what the localized placeholder is for your language, and replacing all instances of "Image" in the CSS with that. +Images without alt-text are given a placeholder alt-text of "Image" by Twitter, +but this is localized if you're using Twitter in a different language. +For example, the placeholder becomes "Immagine" in Italian, or "圖片" in Traditional Chinese. +As a result, you should set the "alt-text placeholder" to the one in your language, for this style to work. ## Installation diff --git a/twitter-alt-text-viewer.user.css b/twitter-alt-text-viewer.user.css index 97d712d..6d92f49 100644 --- a/twitter-alt-text-viewer.user.css +++ b/twitter-alt-text-viewer.user.css @@ -2,26 +2,15 @@ @name Twitter Alt-Text Viewer @description Make alt-text visible on Twitter web @namespace https://github.com/lunasorcery -@version 1.0.0 +@version 1.1.0 @author lunasorcery @license MIT -==/UserStyle== */ - - - -/* IMPORTANT NOTE: -This userstyle only works if your Twitter UI language is set to English. -Images without alt-text are given a placeholder alt-text of "Image" by Twitter, -but this gets localized if you're using Twitter in a different language. -It should be possible to fix this by finding out what the localized placeholder is for your language, -and replacing all instances of "Image" in this userstyle with that. -*/ - +@var text placeholder "alt-text placeholder" "Image" +==/UserStyle== */ @-moz-document domain("twitter.com") { - /* ==== colored border indicates whether alt-text is present or not ==== */ :root { /* options */ @@ -38,14 +27,12 @@ and replacing all instances of "Image" in this userstyle with that. border-width: var(--alt-text-border-thickness-missing); border-color: var(--alt-text-border-color-missing); } - /* only show positively if the aria-label isn't "Image" */ - div[data-testid="tweetPhoto"][aria-label]:not([aria-label="Image"]) { + /* only show positively if the aria-label isn't the placeholder */ + div[data-testid="tweetPhoto"][aria-label]:not([aria-label=/*[[placeholder]]*/]) { border-width: var(--alt-text-border-thickness-present); border-color: var(--alt-text-border-color-present); } - - /* ==== corner icon indicates whether alt-text is present or not ==== */ :root { /* options */ @@ -71,10 +58,10 @@ and replacing all instances of "Image" in this userstyle with that. font-size: var(--alt-text-icon-text-size); font-weight: bold; } - /* only show positively if the aria-label isn't "Image" */ - div[data-testid="tweetPhoto"][aria-label]:not([aria-label="Image"]):after, - div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>ul>li>div>div>div>div[aria-label]:not([aria-label="Image"]):after, - div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>div>div[aria-label]:not([aria-label="Image"]):not([role]):after { + /* only show positively if the aria-label isn't the placeholder */ + div[data-testid="tweetPhoto"][aria-label]:not([aria-label=/*[[placeholder]]*/]):after, + div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>ul>li>div>div>div>div[aria-label]:not([aria-label=/*[[placeholder]]*/]):after, + div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>div>div[aria-label]:not([aria-label=/*[[placeholder]]*/]):not([role]):after { content: "✓ ALT"; background: var(--alt-text-icon-background-present); color: var(--alt-text-icon-text-color-present); @@ -86,8 +73,6 @@ and replacing all instances of "Image" in this userstyle with that. display: none; } - - /* ==== text overlay on hover shows the actual alt-text ==== */ :root { /* options */ @@ -99,9 +84,9 @@ and replacing all instances of "Image" in this userstyle with that. div[data-testid="tweetPhoto"][aria-label] { margin: 0 !important; /* required to reset twitter's cropping offset */ } - div[data-testid="tweetPhoto"][aria-label]:not([aria-label="Image"]):hover:after, - div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>ul>li>div>div>div>div[aria-label]:not([aria-label="Image"]):hover:after, - div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>div>div[aria-label]:not([aria-label="Image"]):not([role]):hover:after { + div[data-testid="tweetPhoto"][aria-label]:not([aria-label=/*[[placeholder]]*/]):hover:after, + div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>ul>li>div>div>div>div[aria-label]:not([aria-label=/*[[placeholder]]*/]):hover:after, + div[aria-labelledby="modal-header"]>div>div:not([aria-expanded])>div>div>div>div>div>div[aria-label]:not([aria-label=/*[[placeholder]]*/]):not([role]):hover:after { content: attr(aria-label); background: var(--alt-text-overlay-background); color: var(--alt-text-overlay-text-color); @@ -117,4 +102,5 @@ and replacing all instances of "Image" in this userstyle with that. font-weight: normal; box-shadow: 0px 1px 2px rgba(0,0,0,0.3); } + }