Scaling text, not just scaling text _ Application Tips

Source: Internet
Author: User
Tags css zen garden

A few days ago, Ian Liu made an interesting discovery: Careful usability considerations , mainly about scaling pages, such as the Ikea site mentioned in the article. Of course, the most valuable is the comments section, interested friends can go to see first.

Each browser has its own mechanism to implement scaling approximately as follows:

    • IE7: Entire page scaling and text scaling, mouse operation (Ctrl + mouse wheel) for the entire page scaling, text scaling does not provide shortcut keys, only through the browser menu action (see › Text size › Big | small) to choose.
    • ie5~6: Text scaling, mouse operation and browser menu operation are the same function.
    • Firefox2: Text scaling, mouse actions and browser menu actions (menu shortcuts: Ctrl + "+" + "-") are all the same function. The details of the difference is the mouse operation scaling a file, menu operation to enlarge two files.
    • Opera: The entire page scaling, mouse operation and browser menu operation are the same function, the browser menu to provide more zoom ratio.
    • Safari: Text scaling, browser menu action (menu shortcuts: apple+ "+" apple+ "-"). The entire page scaling is done by the Mac system, the win version does not have the entire page scaling function.
    • Proud Tour 2: This is a special browser, using the IE kernel. In addition to the implementation of IE scaling function, but also the implementation of a single image zoom function (Proud Tour Settings Center › Floating button or hold down the Ctrl+alt key to move the mouse on the object can be forced to show the floating button).

Other browsers are not studying, and they are also estimated to be similar in some types. In Ie5~6, the power of scaling has become a normal thing. 12PX is a great value. Although the new browser has changed the 12px not scalable, but those who do not use text scaling of the site seems to be vulnerable to the test of new features. Improved resolution also increases the difficulty of obtaining information: in a "IE6" browser, text may not be visible, and the Web page may not be visible in a browser that only implements text scaling (FIREFOX2). Although the browser has the ability to provide scaling, we will destroy it, such as:

    • IE: The use of absolute units of text, such as PX, when the browser scaling the text of the function to destroy it, although IE is also wrong, but still because our definition led to the occurrence of the problem.
    • Firefox or IE : The text-less element is also used as a relative size unit, such as EM, when the browser only scales the text function.
    • Only the text scaling Browser: The use of background pictures, Flash, and other ways to display text, so that text becomes not text. With a special CSS definition, so that the enlarged text of the page can not see clearly.

Just the text problem is already the old problem, do not want to pull anything, first look at the CSS Zen Garden This classic example, is only the use of text scaling, the entire interface also scaling, in fact, not fully scaled, the picture part is not, the contents of the picture is also text. But. Because it is a background image, so there is no way to zoom. Ian Liu said: If the font in the picture is too small, the user tries to make a large but failed to improve the corresponding function, also can bring frustration to the user. Of course, the font of the example just now may not be used to zoom or see clearly, but what if I'm using a 24′ monitor? There is one next to my company's seat.

Then look at the Ikea website , the shrimp is relative, so that the browser zoom is the same. Scaling, however, is full page scaling. This time the text in the picture is also scaled. Seems to have been more perfect, but the disadvantage is that only the function of scaling text has been replaced, what to do to replace the function? How do you know I don't need it? Am I going to use the whole zoom without changing the function? Is it because of the browser problem? Then we should yell at those damn browsers. Why not give us this functionality.

Then look back at the Yahoo! site , the effect is actually just like the CSS Zen garden is the same, but there are some different, one is the background picture, one is the picture content. If you use a proud tour 2 o'clock, you can simply put in the picture, but this feature does not enlarge the background image. If you want to zoom in, it might be more appropriate to use the full page amplification feature. Perhaps scaling should be the function that the browser provides, not what we have to reinvent. Picture replacement This technology has always been the biggest drawback is not to be scaled, like SIFR also have the same problem, gorgeous effect has a price. Perhaps we will not be able to think about this much later, Firefox3 is said to have supported the entire page scaling function. But if we put the text information in a different way, the elements that look like text should be grouped, should they be scaled with the text at the same time? Do we want to deprive ourselves of the ability to scale the text simply? Is it because the real word scaling is so difficult to do?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.