Results 1 to 8 of 8

Thread: Images as text

  1. #1
    Join Date
    Feb 2004

    Images as text

    It's been a while, but I figure it's time to ask some more questions.

    I understand that IE is the only browser taht allows pixel units for font. What I can't remember is if varying the relative font sizes in browsers also affect pixel units in general. For example if a div is specified in pixels, adjusting the text size in the browser won't affect that divs dimensions, will it? Only if the dimensions were in relative font sizes, correct?

    I have read countless articles where text is being replaced with images. My question is will this be accessible? I'm considering doing this with a menu. If I follow the guidleines for image accessibility, including alt values, ect. this should still validate correct?

    Any additional advise if I follow this approach? Other than don't do it . Unless of course it truly is inaccessible....

  2. #2
    Join Date
    Jul 2003
    New York City
    IE is not the only browser that allows pixel units for font. Read the CSS Specs. I think IE may not interpret pixels as a relative size, as it should. But, it is perfectly valid to use pixels for font size. However, since IE doesn't interpret px as relative, it won't allow resizing. I generally recommend one use em or percentages for font-size.

    If an element's dimensions are given in pixels, then resizing font won't affect the element's dimensions. If, however, you use em for the dimensions, resizing text will affect it. Percentages used for dimensions will size the element according the it's parent element. Thus, if you have the body element set to a width of 50%, and since the html element defaults to the width of the browser window, body will be 50% as wide as the window. Hope that made some sense.

    In terms of images replacing text, I'm not generally fond of it. The practice can be considered acceptable as long as you're not replacing large amounts of text, and only if you're using it so that you can implement a non-standard font. For instance, say you've downloaded a really cool font. But it isn't standard on computers. You can make images, and using the proper techniques, replace headers with it. Headers, and site nav. But anything more than that is pushing it. And for cross-device compatibility and search engine rankings, I do suggest you use image-replacemnt techniques. If done properly, it will work fine.

  3. #3
    Join Date
    Feb 2003
    to go small step further, i reccomend using images for text only where it cannot be displayed otherwise. my favorite example is text turned 90 degrees to the left and read vertically (like in a column heading type display).

    also, if you are going to use an image for text, be sure to use an alt attribute with the same text.

  4. #4
    Join Date
    Feb 2004
    Thanx for the confirmation guys.

    What about image maps? How do we use them and still have the page be accessible? I suppose validating would be good too....

  5. #5
    Join Date
    Nov 2002
    Baltimore, Maryland
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Nov 2003
    Germany, Europe
    Image Maps are an outdated method!
    But if you still want to use them, don't forget the alt tags!
    More: http://www.w3.org/TR/WCAG10-HTML-TEC...de-text-equivs
    Last edited by Webnauts; 01-05-2005 at 07:52 PM.

  7. #7
    Join Date
    Jan 2005
    Can you use TITLE tags on images as well?
    Observation Creates Reality

  8. #8
    Join Date
    Nov 2003
    Germany, Europe
    Originally posted by hasuinterceptor
    Can you use TITLE tags on images as well?
    Yes, if they are linking. While that improves accessibility, usability and SEO. More: http://www.webcredible.co.uk/user-fr...lity-seo.shtml
    Last edited by Webnauts; 01-10-2005 at 11:06 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09705 seconds
  • Memory Usage 2,911KB
  • Queries Executed 13 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (8)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (8)postbit
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates