digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

CSS Text Zooming

labs.silverorange.com — Allowing users to increase/decrease text size using CSS and simple Javascript like Wired and digg does. Full source code and working example.

Bury
show profanity settings
expand all
  • billmania, on 10/12/2007, -65/+9You know Opera has had this for years...
    • compuXP, on 10/12/2007, -22/+39And so has every other browser. But suppose people just want to change the text size for the webpage their viewing. You're pretty stupid.
    • nathanmock, on 10/12/2007, -14/+6Yah, some poeple want to change the text size for a specific webpage. Changing the text size within a browser changes it across all sites. And Opera isn't the only browser that has this, although it is the only browser I know of that zooms in on images as well as text, without messing up the layout
    • TheReport, on 10/12/2007, -17/+3yeah stupid, get it right gahhhh
    • cg0def, on 10/12/2007, -22/+4No compuXP, you are the stupid one. Maybe you should think before you post next time. There are a lot of neat things that you could do with css and like it was already pointed out css would change the way text is displayed only on one site/page and NOT accross all pages that you visit. Giving the user an option to use an alternate css sheet for a site is very neat and actually a sign of good design ( in most cases ).

      Anyway this news is really no news ...
    • masamunecyrus, on 10/12/2007, -1/+7cg0def, that's what he was saying. It's a useful thing to know if you want to change the text size for ONE website, as opposed to ALL websites.
    • n00tz, on 10/12/2007, -0/+5@masamunecyrus:
      This is really of more use when you want to change the style for a certain element of a website, say a particular div or table.

      @compuXP,nathanmock:
      Firefox already supports the text increase on a per-tab basis. So the "what if I only want /this/ website to have bigger font" argument doesn't work. (Press "Ctrl" " " or "Ctrl" "-" and switch tabs to notice this feature).
    • beendugg, on 10/12/2007, -1/+2Not taking sides here, but certain browsers (Safari and Omniweb for the Mac, for instance) do allow per-page resizing.
  • bscott86, on 10/12/2007, -3/+8Pretty cool article. It swaps an entire CSS sheet, unlike a lot of other scripts I have seen. You get slick looking function calls like this:

    a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default< /a>
  • ThndrShk2k, on 10/12/2007, -12/+2You know, it's kinda old news since digg.com 's front page has it too.
    it's in the upper right of the column sections, Above DIGG FOR STORIES
    • sqthreer, on 10/12/2007, -2/+5Yeah, it sorta mentions that in the description. This article explains how to achieve that feature, it isn't claiming that it's some new revolution in web design.

      As for the article, I like it. I had wondered if there was a simple way to do this, and it could come in handy someday.
  • boredzo, on 10/12/2007, -2/+5Direct link: http://www.deltatangobravo.com/archives/2004/september/zoomzoomzoom
  • fcuknu, on 10/12/2007, -11/+5wow, this is amazing?
    • paradoxic, on 10/12/2007, -6/+7Amazing! This is news? an archive from 2004 ?!?!

      hmmmm
  • rasko, on 10/12/2007, -5/+2I liked this, just fine.
  • trovster, on 10/12/2007, -3/+7Yeh, ctrl+mouse wheel or ctrl+plus/minus ... magic.
  • smhill, on 10/12/2007, -11/+7Reported as lame.

    It is two years old and very common-place and simple.
  • Lifestory, on 10/12/2007, -7/+2well.. it deserves to be mentioned cos i think it will help some people out there, but come on.. to be on the front page?
  • CrookedAsterisk, on 10/12/2007, -5/+4I was amazed to find how not-amazed I was by this. What stops people from using the in-build text resizing feature in their browsers, the standard way? And don't say because of the images because who really wants reload an image just to see a bigger version of it? Especially when it's not the body content of a page or something you are really going to spend time on reading.
    • g5604, on 10/12/2007, -6/+3most people will never touch any of the menus in their browsers.
  • cosmicsmash, on 10/12/2007, -5/+2RTFA guys. From the article: "...a handy way to make not only text but images as well zoom in for people"

    The whole point of the article was to demonstrate how to resize images, not just text. The example demonstrates this very well:
    http://www.deltatangobravo.com/images/zoom/
    • CrookedAsterisk, on 10/12/2007, -1/+3Swapping the source of images or changing the width/height properties with JavaScript is really nothing revolutionary.
    • Grimboy, on 10/12/2007, -1/+1Just set your image sizes with em. Problem solved. This (http://www.cssplay.co.uk/menu/em_images.html) article shows the pros and cons of different em and acctual sizes for your images sizes. This is easier, and, what's more, it's actually css as opposed to using javascript.
    • zahadum, on 10/12/2007, -1/+0the ref to the em-sizing at http://www.cssplay.co.uk/menu/em_images.html is a broken link (404)

      digg webmaster should have a tool that validates all urls before posting them (other webforms already valdate speeling, so why not this!)

      anyone know of a good/simple tool to do this?

      cheers: dlf

      ps: this tool should also be able to have a monitor function: do a live update (with an archive, of course) to keep the link fresh in the future - and maybe even notify the webmaster (also of the external site) if the link has irretrievabley changed.
  • gypsyjoe, on 10/12/2007, -1/+7Set your text size using ems.
  • samstr, on 10/12/2007, -1/+2old news. sorry. i was expecting an actual zoom perhaps (scriptaculous.js) but this is just alternate stylesheets. been around forever.
  • keeperofkeys, on 10/12/2007, -0/+0It isn't true that when you increase text size on a page, that change is reflected in all other pages. In Firefox, at least, it's per-tab. I like the ability to zoom images, too; though I have to say FF will have to catch up with IE7 which offers the ability to zoom the entire page.
  • tybris, on 10/12/2007, -4/+3wow, how unimpressive
  • MrSunshine, on 10/12/2007, -3/+2ctrl +/-
  • varmit, on 10/12/2007, -0/+2How about you build the text resizing into the browser. Like Safari on the Mac already does. Just add the sizing on the tool bar, then just hit up or down to make the words larger or smaller to you liking. I'm sure something on windows has the same thing. If not, they will do it soon enough.
  • SpookyET, on 10/12/2007, -0/+2Create elastic sites that zoom in, zoom out when you increase and decrease the text using the browser controls in Firefox similar to how Opera's zoom works using EM units. This method is a poor way to implement text zoom because not only that you have to have different stylesheets for each size, you also do not know the confortable size the user wants. What if the sizes you chose do not satisfy the user? He'll use the browser controls, and the page will break. Use, EMs,and the page will never break.
  • aeoo, on 10/12/2007, -0/+1People, McAffee SiteAdvisor gives me a spam warning for the site linked in this article.
  • chicksdigme, on 10/12/2007, -0/+2nice article. I've been curious about this for a while. Thanks for the post.
  • JoeWindetc, on 10/12/2007, -0/+1+Digg for the idea to switch btwn style sheets.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.