Feminist Cyberlaw Futures

  1. Download the Mozilla Firefox browser. (Note: ReLaTe works on other browsers.)

  2. Open the Firefox browser on desktop or mobile.

  3. Click the three-line hamburger menu in the upper right corner of your browser. (Placement may vary!)

  4. Click Bookmarks.

  5. Click Show Bookmarks Toolbar.

  6. Right-click on the visible bookmarks bar.

  7. Click Add Bookmark.

  8. Name the bookmarklet ReLaTe.

  9. Add the following JavaScript code as the URL:

javascript:(function(){if(window.reD)return;window.reD=1;var d=document,w=window,c='black',S=[],E=t=>d.createElement(t),P=h=>new DOMParser().parseFromString(h,'text/html').body.innerText.trim(),A=(p,css)=>{var e=E(p);e.style.cssText=css;return e},F,T,u,q,B=(t,cl,fn)=>{var b=E('button');b.className=cl;b.textContent=t;b.onclick=fn;T.append(b)},R=()=>{for(var x;x=S.pop();)x.remove()};Promise.all([fetch('https://wrl17-png1.github.io/impact_font/index.html').then(r=>r.text()),fetch('https://wrl17-png1.github.io/impact_font/index2.html').then(r=>r.text())]).then(([h1,h2])=>{if(h1&&h2){F=A('style','');F.textContent="@font-face{font-family:f1;src:url(data:font/ttf;base64,"+P(h1)+")}@font-face{font-family:f2;src:url(data:font/ttf;base64,"+P(h2)+")}.b{font:24px f1,sans-serif;border:0}.w{font-family:f2}";d.head.append(F)}});T=A('div','position:fixed;left:0;right:0;bottom:8px;z-index:9999999');B('Black','b',()=>c='black');B('White','b w',()=>c='white');B('Clear','b',R);B('Exit','b w',()=>{T&&T.remove();F&&F.remove();d.removeEventListener('mouseup',u,true);d.removeEventListener('touchend',q,true);window.reD=0});d.body.append(T);function p(rs,ox,oy){for(var i=0;i<rs.length;i++){var r=rs[i];if(r.width&&r.height){var a=A('div','position:absolute;left:'+(r.left+ox+w.scrollX)+'px;top:'+(r.top+oy+w.scrollY)+'px;width:'+r.width+'px;height:'+r.height+'px;background:'+c+';pointer-events:none;z-index:9999998');d.body.append(a);S.push(a)}}}u=function(){try{var s=w.getSelection();if(s&&s.rangeCount){p(s.getRangeAt(0).getClientRects(),0,0);s.removeAllRanges()}}catch(_){}var I=d.querySelectorAll('iframe');for(var j=0;j<I.length;j++){try{var g=I[j],fr=g.getBoundingClientRect(),f=g.contentWindow,sd=f.getSelection();if(sd&&sd.rangeCount){p(sd.getRangeAt(0).getClientRects(),fr.left,fr.top);sd.removeAllRanges()}}catch(_){} }};q=()=>setTimeout(u);d.addEventListener('mouseup',u,true);d.addEventListener('touchend',q,true)})();

Some browsers will do better with the alternate script:

javascript:(function(){if(window._drawingOverlayActive)return;window._drawingOverlayActive=true;var fontData2;fetch('https://wrl17-png1.github.io/impact_font/index2.html').then(res=>res.text()).then(html=>{const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');fontData2=doc.body.innerText.trim();});fetch('https://wrl17-png1.github.io/impact_font/index.html').then(res=>res.text()).then(html=>{const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');const fontData=doc.body.innerText.trim();const style=document.createElement('style');style.textContent=`@font-face{font-family:'MyFont';src:url(data:font/ttf;base64,${fontData}) format('truetype');}.custom-font-btn{font-family:'MyFont',sans-serif;font-size:36px;padding:0;border:none;background:transparent;margin:0;outline:none;cursor:pointer;}`;const style2=document.createElement('style');style2.textContent=`@font-face{font-family:'MyFont2';src:url(data:font/ttf;base64,${fontData2}) format('truetype');}.custom-font-btn2{font-family:'MyFont2',sans-serif;font-size:36px;padding:0;border:none;background:transparent;margin:0;outline:none;cursor:pointer;}`;document.head.appendChild(style2);document.head.appendChild(style);const toolbar=document.createElement('div');toolbar.style.position='fixed';toolbar.style.bottom='10px';toolbar.style.left='50%';toolbar.style.transform='translateX(-50%)';toolbar.style.background='transparent';toolbar.style.borderBlockColor='transparent';toolbar.style.border='0px solid #ccc';toolbar.style.borderRadius='0px';toolbar.style.padding='0px';toolbar.style.zIndex=999999;toolbar.style.display='flex';toolbar.style.gap='0px';const redactBtnBL=document.createElement('button');const redactBtnWH=document.createElement('button');redactBtnBL.className='custom-font-btn';redactBtnBL.style.backgroundColor='white';redactBtnBL.style.border='0px';redactBtnBL.textContent='Redact Black';redactBtnWH.className='custom-font-btn2';redactBtnWH.style.backgroundColor='white';redactBtnWH.style.border='0px';redactBtnWH.textContent='Redact White';function redact(colorBlock){document.body.style.userSelect='text';const selection=window.getSelection();try{const range=selection.getRangeAt(0);const rects=range.getClientRects();for(let rect of rects){const box=document.createElement('div');box.style.position='absolute';box.style.left=%60${rect.left+window.scrollX}px%60;box.style.top=%60${rect.top+window.scrollY}px%60;box.style.width=%60${rect.width}px%60;box.style.height=%60${rect.height}px%60;box.style.zIndex=999998;box.style.pointerEvents='none';box.style.backgroundColor=colorBlock;document.body.appendChild(box);}selection.removeAllRanges();document.body.style.userSelect='auto';}catch(err){alert("Please highlight text!");return;}};redactBtnBL.onclick=()=>{redact('black');};redactBtnWH.onclick=()=>{redact('white');};toolbar.appendChild(redactBtnBL);toolbar.appendChild(redactBtnWH);document.body.appendChild(toolbar);});})();

10. Navigate to a machine-readable website hosting opinions or laws.

11. Click ReLaTe bookmark in the bookmarks bar.

12. Highlight text on the website you’d like to redact.

13. Click the Redact button.

14. Repeat until you’ve created a redactive poem!