SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Deeper Study into Digital Text and Character Encoding

May 23, 2011 by Jake Rocheleau 2 Comments

Most web designers and developers do not need any instructions for dealing with character encoding. In general the process is done within the browser and isn’t often a topic of discussion amongst programmers. However the tools and regulations used to enforce such strict document types provides leverage for debugging and creating professional typographic aspects to a website.

Although the topic is brief I’ve gone over some of the quick highlights and important notations. You should be able to breeze through these topics if you have at least a beginner’s understanding towards digital documents. Basic HTML isn’t required although these techniques mostly apply to web files such as HTML, CSS, and PHP.

Along with encoding types there are many standards for digital typography. These become more convoluted as you work towards web projects and websites in general. We’ve written on great CSS techniques which may also be of use to any frontend developers.

Document Character Encoding

For a proper introduction character encoding must be explained as a digital phenomenon. This means we do not face similar problems with type written on paper or other canvas.

This is because each character in a font set is assigned a specific symbol. This is also appointed as a numerical value within the computer’s storage system language. After saving any type of web document you must choose a character encoding (generally UTF-8, ANSI, ASCII).

The apparent flaws with character encoding come with missing blocks to your page content. Lettering such as the copyright sign may be misinterpreted with the wrong encoding and you’ll get a missing character symbol. This may be a small black triangle, empty rectangle shape, or any number of symbols.

As HTML developers understand we have shortcuts for implementing special characters into your page. These are often known as HTML entities which are reserved under special numerals or lettering. For example, © will display the exact same character as ©. The numerical value demonstrates which placeholder the symbol will be stored under – in this case value 169.

Importance for Designers

You may still be questioning why this is so important? Well as a developer you may not run into much trouble under the Roman alphabet. For English speaking countries we have the advantage of running many popular character encoding sets. But consider pages written in languages not only different through lettering, but entire alphabets!

You may only need a universal encoding for languages such as German or Spanish. The case for special characters are often held in reserve which means you may combine English and foreign characters together. But consider languages such as Japanese or Russian where you’ll need an entirely new set of glyphs.

It may not be all too often where you’ll be writing Chinese webpages. However if you can understand how the technology works you’ll be better off in the long run with your practices as a webmaster. The HTML character encodings wiki page should answer a few more obvious riddles.

Prime Examples

If we can begin to examine HTML pages in-depth you may be surprised at just how little is required. We may set a simple meta tag towards the heading of any web document which supports defining the character set, or charset. Below is a brief example:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

The attribute for charset is defined within the content attribute. This may sound a little confusing and thankfully represents an older way of defining doctypes. However it’s not a bad solution and will still be processed properly with older and modern web browsers alike.

Although you may not be too interested with charsets there isn’t all too much to remember. If you can keep the names of important sets on-hand as code snippets you may end up saving loads of time on project work. For those interested research ISO 8859-1 charset details which outline the various elements in table format.

If you’ll be creating an XML or XHTML document then a simpler tag may be placed before all other code. This line of code defines all further elements and typography down the page. Within XHTML it’s possible to define your character set based on newer XML tag principles.

<?xml version="1.0" encoding="utf-8" ?>

The defining XML element above sets any webpage to XHTML standards. XML 1.0 is the finest revision containing standard nodes for HTML placement and manipulation. You don’t need to understand the tag all too well, but understanding the UTF-8 encoding style may shine some light on your other options.

Conclusion

The concept of page encoding is absolutely an important one. It may not be required to build a basic website but after some time you will certainly run into trouble with typography. It helps to understand just how each letter is constructed and where the computer is reading this information from.

You may find it difficult to choose a character set without further guidance. The system isn’t all too complicated and just requires a bit of study time on your part. Ultimately you hold all the tools you need within whatever development environment you’re currently using. Both Mac and PC offer viable solutions for character sets even with Notepad and TextEdit as your default.

What are your thoughts on character sets and digital reference guides? We’ve got a small collection of tips for improving your webpage typography. If you know of similar resources or fantastic designers please share your ideas in the comments below.

Filed Under: Typography

Comments

  1. Paginas Internet Puerto Rico says

    May 23, 2011 at 9:53 am

    Character encoding is an issue that mostly arises in the context of information processing and digital transcriptions of texts. To be precise, the honor of having created the first character encoding, long before the digital revolution, goes to Samuel Finley Breese Morse (1791–1872) for his Morse alphabet used in telegraphic transmissions. Texts are written by creating marks on some kind of medium. Since these written marks, characters as they are usually called, form part of the writing systems they are used in, they came to be analyzed and encoded within the context of that writing system.

  2. samar says

    June 8, 2011 at 2:21 am

    Thanks for this amazing article..i will Highly recommended it for all..Bookmarked it for new posts.Meanwhile i want to take you attention to a new website dealing with Treatment of Phimosis .Look into it as some nice stuffs are there

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022