Bookmarklet to make the text between 45 and 75 characters turn red.

Developer
Chris Coyier
Size
2,974 Kb
Views
52,624
  1. Bookmarklet to make the text between 45 and 75 characters turn red. Previews
  2. Bookmarklet to make the text between 45 and 75 characters turn red. HTML Codes
  3. Bookmarklet to make the text between 45 and 75 characters turn red. CSS Codes

How do I make an bookmarklet to make the text between 45 and 75 characters turn red.?

Because that's generally the ideal line length and when it's red you can adjust media queries and font-size and stuff until it's about right.. What is a bookmarklet to make the text between 45 and 75 characters turn red.? How do you make a bookmarklet to make the text between 45 and 75 characters turn red.? This script and codes were developed by Chris Coyier on 29 July 2022, Friday.

Bookmarklet to make the text between 45 and 75 characters turn red. Previews
IQ Test

Bookmarklet to make the text between 45 and 75 characters turn red. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bookmarklet to make the text between 45 and 75 characters turn red.</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Bookmarklet to make the text between 45 and 75 characters turn red.</h1>
<p><a class="bookmarklet-link" href="javascript:(function(){function%20loadScript(a,b){var%20c=document.createElement('script');c.type='text/javascript';c.src=a;var%20d=document.getElementsByTagName('head')[0],done=false;c.onload=c.onreadystatechange=function(){if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;b()}};d.appendChild(c)}loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js',function(){
var redOutline={outline:'2px solid red'},text;var textyElements='p, li, dt, dd, h1, h2, h3, h4, h5, h6';$(textyElements).on('mouseover.red',function(){$(this).css(redOutline)}).on('mouseleave.red',function(){$(this).removeAttr('style')}).on('click.red',function(){text=$(this).text();var e=text.substring(0,45);var t=text.substring(45,75);var n=text.substring(75,text.length);var r=e+'<span style=\'color: red;\'>'+t+'</span>'+n;$(this).html(r);$(textyElements).off('mouseover.red mouseleave.red click.red');$(this).removeAttr('style');}) })})()">45-75</a>
&larr; Click that. Then hover over a text element and click that.
</p>
<p>Drag it to your Bookmarks bar to save.</p>
<p>Why? Because that's generally the ideal line length for body copy. When those characters are red you can adjust media queries and font-size and stuff until it's about right at any screen size.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit amet distinctio ab minus repudiandae earum similique sapiente eos maiores illo ut veniam nisi incidunt quaerat ipsam cum ducimus animi id autem illum. Aliquid consequatur a optio illum blanditiis earum error voluptates suscipit in dignissimos facilis ab perferendis modi itaque ullam nam nostrum laborum velit vero est maiores iste quae nesciunt deserunt qui natus aut laudantium magnam neque fugiat animi accusamus eum dolorem? Accusantium earum beatae minus aspernatur recusandae enim unde qui veniam accusamus atque voluptate numquam! Dignissimos aut aspernatur quae enim ab animi deserunt possimus blanditiis cupiditate nobis incidunt velit.</p>
</body>
</html>

Bookmarklet to make the text between 45 and 75 characters turn red. - Script Codes CSS Codes

/* Mobile First */
body { font-family: "Lucida Grande", sans-serif; margin: 20px auto; width: 95%; font-size: 70%; line-height: 1.4;
}
@media (min-width: 400px) { body { width: 90%; font-size: 75%; }
}
@media (min-width: 700px) { body { width: 80%; font-size: 90%; }
}
@media (min-width: 850px) { body { width: 70%; font-size: 100%; }
}
@media (min-width: 1000px) { body { width: 60%; font-size: 110%; }
}
@media (min-width: 1100px) { body { width: 50%; font-size: 115%;}
}
@media (min-width: 1450px) { body { width: 40%; font-size: 125%; }
}
p { margin: 0 0 1.4rem 0;
}
.bookmarklet-link { border-radius: 4px; background: linear-gradient(#eee, #ccc); padding: 5px 10px; border: 1px solid #999; color: #222; text-decoration: none;
}
Bookmarklet to make the text between 45 and 75 characters turn red. - Script Codes
Bookmarklet to make the text between 45 and 75 characters turn red. - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded July 29, 2022
Rating 4.5
Size 2,974 Kb
Views 52,624
Do you need developer help for Bookmarklet to make the text between 45 and 75 characters turn red.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Airtable Emoji Poll
Automatic Table of Contents
Simple jQuery Slideshow
A Pen by Chris Coyier
JQuery Draggable with out jQuery UI
Make This Responsive
Three-Line Menu Icon, Various Techniques
JQuery and CoffeeScript
Stairway Hover Nav
Centering in the Unknown
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!