Apr. 7th, 2013

carene_waterman: An image of the Carina Nebula (Default)
So when last we left this really long story, I had a list of wants for the perfect remove images bookmarklet.

The Prototype


I have a prototype I'd like to see tested by others, but first I want to check my list.

Did I get what I wanted?

  • Yes Images off, but not removed from the DOM so that dynamically added images will show up on the page at least as an image.

  • No Limiting the text flow issues and overlap you get where the alt text is too long for the image container.

  • Yes Works in at least FF, Webkit (Blink!) and current Opera.

  • Yes Allows some way to respond to unhidden new content. Either automatically or a quick re-run of the removal script.

  • Yes Making sure an image link with no alt text is still clickable.


And did I get what I might like?

  • No Some custom style for image link alt text to avoid it not looking like a link when the native styling removes the regular link styling for the page

  • Yes Some customs style for all the alt text to make it clear it is not regular content text.

  • Yes Some visual designation that there was an image there--to help with no alt text images and image links.


Which is not bad.

I gave up on the idea of doing anything much to the alt text itself. It is just too complex an issue to make it not break layouts sometimes. The choice Webkit made to only show alt text when images won't load if it will fit on one line in the space the image takes up is an example of putting the layout ahead of usability to overcome this dilemma. I decided to let the layout break since this is only a tool that's easy to turn off.

I did get some benefits I hadn't thought about going in, and I like the result.

The code for the prototype


/*Set up the forEach method and get all the images on the page*/
var forEach = Array.prototype.forEach;
var images = document.getElementsByTagName("img");

/*Main function where most of the action is*/
function removeImages()  {
  /* First, it gathers up all the created alt text elements (present if the function has run before) and gets rid of them.*/  
  var altSpans = document.querySelectorAll(".alt-text-bookmarklet");
  forEach.call(altSpans, function(span) {
    span.parentNode.removeChild(span);
    });
  
  /*Next we do the actual image removal by replacing each image with a data URI of a transparent 1px gif.  The images get a border that is the text color*/
  forEach.call(images, removal); 
  function removal(img){
    img.setAttribute("src", "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    img.style.border = "solid thin";
    
    /*Now we give the image some alt text if it has none and it's inside a link.*/    
    var imageAlt = img.getAttribute("alt");
    if ((imageAlt === "" || imageAlt === " ") && img.parentNode.nodeName.toLowerCase() === 'a') {
        imageAlt = "Link";
        } 

    /*Now we take the alt text and make it into a span that goes after the image.  It's in smallcaps and has a little padding.*/
    var  altText = document.createElement("span");
    altText.className = "alt-text-bookmarklet";
    altText.style.fontVariant = "small-caps";
    altText.style.padding = "0 0.25em";
    altText.innerHTML = imageAlt; 
    img.parentNode.insertBefore(altText,img.nextSibling);  
  }
}

/*Calls the main function after a delay of 5 seconds.*/
function delayedRemoval () {
  window.setTimeout(removeImages, 5000);
  }

/*Calls the delay function if the mouse is clicked anywhere in the document.*/
document.addEventListener("mousedown", delayedRemoval, false);

/*Calls the main function the first time.*/
removeImages();


How it works


This keeps the time delay after a click from the earlier version, but simplifies it by making it happen on any click anywhere. I chose mousedown as the event, since click events are often set by other scripts on the page that use capture, causing conflicts.

I kept the long 5 second delay simply to allow this to work on Livejournal comment thread expanders, which are very slow.

Images are not set to visibility: hidden or display: none, because that means a new image added via a page script is also invisible.

Instead they are replaced with a 1px transparent gif courtesy of CSS Tricks. This also allows title text on images or its wrapper link to show on hover, or other special hover effects to remain in place.

This can make the page busy, and if a page has spacer gifs on it, and the HTML or CSS does not set the color on that element to something invisible, the border shows. I decided to live with the visible cruft in order to see where an image was.

I kept the insertion of text on image links with no alt text--there is so much missing alt text in the wild, it's needed.

This has been tested in Firefox, briefly in Chromium and Opera, but I have no access to IE. It will not work in IE 8 or lower. It might work in IE 9 or 10.

It breaks some pages. News sites that put very long teaser blurbs for image links into the alt text look horrid. Some DW layouts set icons and some other part of the entry as side by side divs. Long alt text makes this a problem.

It preserves icon popups (images show in these) and title text on DW, as well as allowing the expand/colapse arrows to show and they change to the correct alt text.

If the delay is too short, just hit the bookmarklet again and remove all images.

Here's the bookmarklet to try:

Make a new bookmark and cut and paste the contents of the text box into the URL or Location field. Name you bookmarklet. (Sorry the drag this to the toolbar method doesn't seem to work on DW.)

Profile

carene_waterman: An image of the Carina Nebula (Default)
carene_waterman

July 2014

S M T W T F S
  12345
6789101112
13141516171819
2021 22 2324 2526
2728293031  

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 26th, 2017 12:35 am
Powered by Dreamwidth Studios