Publication Date
Categories
Comments
Next
Previous
Subscribe
Syncotype Your Baselines
Published 2 years ago, at the end of July under Software
I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.
I’m calling it Syncotype. Either install the Safari/Firefox bookmarklet or add one script tag to your page, and the Syncotype box appears in the upper right. Enter your line height and offset from the top of the page in pixels and Syncotype overlays your baseline in red.
Update: Now as a bookmarklet!
You can try it out here.
Installing the Bookmarklet
Install Syncotype as a bookmarklet and you can summon it on any page, any time. Note: Because Syncotype is an external script, it may time-out occassionally. Just click the bookmarklet until it works.
Safari/Firefox
Just drag the below bookmarklet link into your bookmark bar, or right click it and add it to your bookmarks in Firefox:
The One-Line Script
Syncotype isn’t for live sites, it’s for spot-checking your horizontal alignment on a pre-production page. To use it, just add the following script tag to your page:
<script type="text/javascript" src="http://s.robgoodlatte.com/syncotype.js"></script>
To iron out all the bugs and to keep things simple, I’m going to keep it as a hosted external script for now. I will provide a download link for those interested when I am more confident in the script. Feel free to do whatever you’d like with it, I’m putting it into the public domain. I’m not certain if anyone else will find it useful — I’m just throwing it out there.
Browser Support
- Safari 2, 3
- IE 7
- Firefox 1.5+
- Opera 8+
Known Issues
- When Syncotype is active, text and form fields are not selectable on the page. An overlay div is placed over the entire page rather than being set in the background where it could be painted over. Suggestions are welcome on other ways to accomplish this.
Special thanks to Emmett Nicholas for a ton of great code suggestions.
Thanks to Ben Spaulding for suggesting I make a bookmarklet.
Photo by brainsluice under Creative Commons.
Enlighten Me
I find this to be extremely useful and can’t wait to use it. Thanks for sharing!
Brilliant! Syncotype may be the most useful tool for setting type on the web that I’ve ever seen. Thanks for sharing it.
One thought / suggestion: could Syncotype be made into a bookmarklet, thus allowing it to be used to make adjustments on a live site?
Ben — Thanks! That’s a fantastic idea, I’ll see what I can do.
Update: Bookmarklet now available!
Hey Rob, thanks for posting this. By the way, this box that I am typing in is VERY wide, going way past your wrapper. Are you meaning to do this?
Thanks Rob, this really is great. I’ve read a number of articles on vertical rhythm and though I’ve tried to implement a consistent spacing I always find myself coming up a bit short for one reason or another. Having the ability to overlay the grid is going to be very helpful. Thanks again.
This tool is absolutely beautiful. Beats having to use the image background.
Thanks for the great work….
[...] Goodlatte has just released a really handy bookmarklet called Syncotype to help check the vertical rhythm of the typography on a web page. Once you’ve installed it, [...]
Even as a non-designer, I think I’ll probably end up using this to help build some basic CSS that looks good. Thanks!
Hey Rob, sorry about the earlier post. It happens to be an issue with my computer. My default Windows XP fonts were messed with, and have now created some headaches. Sorry about that.
Hey Rob,
I played around with javascript today and figured out a way to overlay the lines without “disabling” the content underneath:
http://www.duke.edu/~efn/syncotype/test.html
It also fixes an issue where your window.onload would override the existing onload handler. It doesn’t look nice as yours, and it doesn’t fade, and IE draws the lines as 2 pixels thick instead of 1, but other than that, it seems to work.
Glad you fixed those bugs. It is now totally awesome.
Nice work. Very simple but works well.
Rob, Awesome work, that script will most definately come in handy in the future!
Again, nice work Rob.
Very, very useful Rob. Nice work.
‘Tis a beautiful thing, Rob. Nice work!
To continue the patting on the back, nice work Rob.
[...] Goodlatte has developed a nice script to help you design that baseline, it’s free and extremely [...]
Great Bookmarklet, very nice! Thanks a lot!
Awesome work! Keep it up!
Rob this is awesome!
Thanks for sharing. This looks very useful.
Hey, neat. I keep meaning to learn to do the vertical spacing thing a bit better, this will help remind me because I’ll feel like an ass when I’m obviously not even close. Very nice tool!
Could you explain the offset to me?
I get the line-height - but the offset does what?
Never mind. Figured it out.
I’d like to use Syncotype to line things up on my blog. For example if I add a photo to a blog post and I want to make sure that I got the dimensions correct so it hasn’t thrown my grid off. Currently to test in this situation I have one of two options a) Use the script tag and know that anyone who visits while I am testing will see garish red lines or b) use the bookmarklet which requires interaction every time I reload.
I’d like to suggest a third option:
I would like to see Syncotype respond to an anchor tacked on to the end of the URL. This would allow me to install the script tag but know that if my URL does not end in #syncotype users will not be able to see the for-testing-only lines. Adding #syncotype to the end would also be the equivalent of pushing the “Syncotype It!” button in the Control Box eliminating the need to click it each time I hit reload.
Finally tacking on dimensions would allow a specific grid to be created with each reload for example #syncotype-18 would create a grid with a line height of 18 and an offset of 0 while #syncotype-18-50 would create the same grid with an offset of 50.
Hopefully this solution (an anchor vs. a query string) allows it to work equally well on both static and dynamic sites eliminating any conflicts with existing query strings.
Now, I am admittedly nowhere near the javascript expert you are but I took the liberty of writing the code to implement these changes. Feel free to either use this code or improve it should you decide my idea is worth implementation.
Also, it seems that you are using the same code base for both the bookmarklet and the one-line script. I have done no testing to ensure that I did not break the bookmarklet - there’s a pretty good chance I have.
If you have time I’d love to hear your thoughts on this either for or against as well as any comments you have on my implementation.
Thanks for a great tool!
-Samuel Mikel Bowles
Changes:
At the bottom of the function renderControlBox() (apx line 72) I added the following code if statement:
if(document.location.href.split("#")[1].match(”syncotype-”) != null) {
var lheight = document.location.href.split(”#”)[1].split(”-”)[1];var offset = document.location.href.split(”#”)[1].split(”-”)[2];
if (offset == undefined) { offset = “0″;}
RG_Syncotype.drawBaselines(lheight, offset);
}
Then I wrapped the final two lines (apx 111 & 112) in an if statement like this:
if(document.location.href.split("#")[1].match(”syncotype”) != null) {
RG_Syncotype.combine = function combine(func1, func2){return function(){if (func1){func1();}if (func2){func2();}};};
window.onload = RG_Syncotype.combine(window.onload, synco_initialize);
}
[...] Syncotype???????????????????????????????????????????????????????line-height?offset??????????syncotype it????????????????? [...]
Should the type not be sitting ON the baseline to be a true baseline grid?
rather than being between the baselines?
Weyr
@Emmett Nicholas
The fix for your IE bug is pretty straight forward. Simply add “span.style.overflow =’hidden’;” to your draw function to get it working in at least the modern versions of IE.
I’ve just published a fork of Syncotype that I am calling Syncotype-Alt at my site which offers the following improvements:
* Huge speed improvements (this was one of my primary complaints)*
* Everything is done in javascript/html/css with no external images*
* No effects (fading in/out) are used.*
* Fixes an issue where Syncotype’s window.onload would override an existing onload handler.*
* The overlay lines no longer disable the content.*
* The control box now stays hidden until a special #anchor is added to the URL.
* Added ability to make changes and reload without direct interaction.
You can find the updated script here:
http://samuel.bowles.es/2007/08/syncotype/
Great additions Samuel! I’ll be incorporating Emmett’s refactorings in addition to some of your feature additions in my release over the next few days.
Well that’s a nifty wee bookmarklet if ever I saw one, cheers!
Any chance of a version to create a vertical grid as well?
Saves me creating a baseline graphic each time.
Excellent work.
[...] Syncotype Your Baselines — RobGoodlatte.com (tags: typography design css grid javascript) [...]
You can safely add Camino to the list of supported browsers.
Wonderful work by the way.
[...] Syncotype Your Baselines — RobGoodlatte.com [...]
Rob … superb … and great site too !
[...] tool for firefox/safari Syncotype Your Baselines — RobGoodlatte.com [...]
Awesome job. This is ridiculously useful.
I updated my version of the script:
http://www.duke.edu/~efn/syncotype/test.html
* It now looks just like Rob’s original version (except no fading)
* Fixed the IE pixel issue in my previous version (thanks Samuel Mikel Bowles)
Awesome bookmarklet. It doesn’t seem to handle floating point numbers. What if I have a base type size of 11px with a 1.5em line-height? The vertical rhythm should be 16.5em.
[...] Syncotype Your Baselines A guide for building pages on a baseline grid. (tags: blog typography design css grid javascript webdesign tools csscookbook) [...]
Thanks for this awesome tool! This is right up there with Firebug and the Web Developer Toolbar on my usefulness scale. Keep up the good work.
I’ve just published an update to Syncotype-Alt to take advantage of some of Emmett’s latest improvements. I did, however, opt to keep this version of the script sans-images for performance reasons. This means the script can’t look quite as nice as Rob’s but it is a bit quicker.
My code has been improved (although it’s still not as pretty and OOy as Emmett’s) but most importantly it keeps the “command-line” features I added in place.
Let me know if you find the updates useful and if there’s anything I can do to continue improving the script.
You can find my latest update on the script here:
http://samuel.bowles.es/2007/08/syncotype-alt-updated/
Thank you! great tool!
[...] el uso de una rejilla base para organizar visualmente los textos de un sitio web, un tipo llamado Rob Goodlatte ha creado un script en javascript llamado Syncotype que genera una rejilla base en tus sitios de pruebas para poder ajustar a tu gusto los [...]
[...] Syncotype Your Baselines — RobGoodlatte.com Handy bookmarklet for checking grid-based CSS layouts (tags: typography design css bookmarklets) This entry was written by Craig and posted on August 7, 2007 at 6:19 pm and filed under Bookmarks. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2007-08-05 [...]
[...] también nos habla de Syncotype [en], un pequeño js que te permite crear rejillas-web y así controlar mejor la [...]
[...] PS: Plus a nice tool to check the consistency of your alignments [...]
Emmett, it seems there are some CSS specificity issues in your latest version of Syncotype which causes the script to be unusable in documents with a strict doctype. To see what I mean switch the doctype you’re using in the test suite from this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I think I fixed the issue by being sure to always add ‘px’ to the end of your style declarations (tip of the hat to Clint Ecker for pointing this out.) These lines need to be changed:
span.style.left = 0;
span.style.top = i;
span.style.height = 1;
to this:
span.style.left = '0px';
span.style.top = i + 'px';
span.style.height = '1px';
I’ve updated Syncotype-Alt to reflect this bug fix. You can find the latest update here:
http://samuel.bowles.es/2007/08/syncotype-alt-updated/
[...] came from a recent development: a CSS framework. To experience the beauty of having a baseline try syncotype and, for this site, set the line-height to 24px. Syncotype [...]
I’d just like to say thanks for creating this wonderful piece of code. Before Syncotype, I’d have an absolutely positioned #lines div on each page (it was a hassle).
I’d love to use the version mentioned that allows you to interact with the page, but it doesn’t seem to work with the bookmarklet (the only reason IMO this is useful).
Thanks!
[...] Syncotype Your Baselines Ein Bookmarklet zur horizontalen Ausrichtung von Texten in raster-basierten Designs. [...]
[...] Syncotype Your Baselines “I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.” [...]
[...] Syncotype Your Baselines “I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.” [...]
[...] Syncotype Your Baselines “I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.” [...]
[...] grid in red. You can also install Syncotype as a bookmarklet and summon it on any page — read the blog post for full details or view the [...]
This is genius, I’m so pleased I found it.
[...] Syncotype Your Baselines A short-and-sweet tool to assist in aligning page elements to a regular baseline grid. When invoked, this bookmarklet will overlay any page with a regular horizontal grid so that you can check your element alignment. Works in all major browsers. (thanks gnarly!) (tags: css software design) [...]
you are the fucking man, thanks for sharing this valuable tool for us lesser designers
[...] Syncotype Your Baselines — RobGoodlatte.com Adds lines to a page to make sure that you’ve got the text lined up on your grid (tags: leading typography grid design bookmarklet) [...]
I just drag’n'dropped the bookmarklet in Firefox and it didn’t work.
It’s because some characters were converted to %XX when bookmarked.
Thanks.
[...] Syncotype Your Baselines Ein Bookmarklet zur horizontalen Ausrichtung von Texten in raster-basierten Designs. [...]
[...] that this seems like it could be a pain. It is. What was my secret weapon? Rob Goodlotte’s Syncotype. What it does is place a horizontal grid over the page you’re viewing, at any size [...]
[...] asientan la mayoría de los caracteres. ¿Por que no en la web? Eso debió pensar un tipo llamado Rob Goodlatte, quien a partir de una guía de A List Apart en la que se proponía el uso de una rejilla base para [...]
[...] Syncotype Your Baselines “I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.” [...]
[...] Syncotype Going hand in hand with Blueprint is Syncotype, a great little bookmarklet that superimposes lines over any webpage. [...]
[...] este bookmarklet feito pelo Rob Goodlatte. A única coisa que você precisa fazer para instala-lo é arrastar o link [...]
[...] is the hardest part. To help you with it, you can use Syncotype to check that everything fits on the baseline, or Grid Layouts to do the same for the vertical [...]
[...] Syncotype Your Baseline: sovrappone alla pagina una griglia per controllare il corretto andamento del ritmo verticale. La uso moltissimo quando in layout intricati devo controllare che bordi e margini non vadano ad intaccare la baseline del documento. [...]
[...] Rob Goodlatte - Syncotype Your Baselines [...]
This is outstandingly useful, but I’ve found one small problem. I tried it out on an in-development site that has a 19.5 pixel line-height. Syncotype doesn’t seem to like decimals at all — I couldn’t get any lines to show up. Using either 19 or 20 pixels was just a little bit “off.”
Other than that, it’s great. In the future, I’ll probably shoot for whole number line heights just so I can use it!
You’re amazing. Thank you!
hi ,very thanks
This script has been a favorite tool of mine. I’ve been using it for over a year now and it makes it really easy to adjust your layouts and see the how each browser interprets measurements from your CSS file. Indispensable. Thanks, dude!
Oops! Not quite a year. Duhhh….
It looks good. Thanks for the article.
Nice work.
Thanks for the great tool.
[...] 2) Syncotype [...]
Good work, thanks.
Looks very good
Thank you for the work
love it. please host it forever.
39998 viagra compra 45472 10354 enkrjvfd ordina viagra 35691 fdjskv fdvf http://members.ebay.it/ws/eBayISAPI.dll?ViewUserPage&userid=viagra-compra viagra compra :) kdjc
35336 viagra 93963 11516 eechjbhs ordina viagra 37287 dslkcnisld http://members.ebay.it/ws/eBayISAPI.dll?ViewUserPage&userid=viagra-compra viagra compra :) cuckjsd
75321 viagra compra 6980 46744 enkrjvfd viagra compra 65353 jhf m mv http://myworld.ebay.it/viagra-compra compra viagra :) hjd skc
89497 viagra 57264 24876 newwm viagra 49726 jhf m mv http://myworld.ebay.it/viagra-compra viagra compra :) cndksjncs
Thank you, Knock Off Coach Purses Photos [url=http://www.movabletype.org/members/knock_off_coach_purses#1]Knock Off Coach Purses Photos[/url], yszm, High Risk Personal Loans For Everybody [url=http://www.movabletype.org/members/high_risk_personal_loans#1]High Risk Personal Loans For Everybody[/url], qqpyy, kim kardashian sex tape [url=http://www.movabletype.org/members/kim_kardashian_sex_tape#1]kim kardashian sex tape[/url], zjhk, Cheapest no credit check loans [url=http://www.movabletype.org/members/no_credit_check_loans#1]Cheapest no credit check loans[/url], doosw, Best fake coach purses [url=http://www.movabletype.org/members/fake_coach_purses#1]Best fake coach purses[/url], %OO,
this script is awsome … thx for this handy tool
The bookmarklet doesn’t seem to work with FF3.5
Works in 3.5 for me.
Feature requests:
Toggle to assign the lines to body tag instead of a div overlaying the entire page (gets in the way of right-click-inspect-element)
Use data urls to generate the 1 line image. What will happen to the script if url(http://s.robgoodlatte.com/i/18.png) is not available for some reason?
[+] and [-] keys for easy nudging of values with immediate visual feedback.
Make the syncotype box fixed to the upper corner of the window so it’s always visible even when we scroll down a long page.