A UMBC Community Message from Provost Philip Rous

I am delighted to announce the appointment of Dr. Julia Ross as Dean of the College of
Engineering and Information Technology (COEIT). Dr. Ross will begin her new role on
August 4, 2014. Dr. Ross’s appointment brings to a successful conclusion a national search that was begun at the start of this academic year.

Dr. Ross received her Ph.D. from Rice University and joined UMBC’s faculty in 1995. Dr. Ross is currently the Constellation Professor of Information Technology and Engineering and professor of chemical, biochemical and environmental engineering. From 2006 to 2013, Dr. Ross served as chair of her department and one of her many accomplishments was a successful merger of two academic programs to form the Department of Chemical, Biochemical and Environmental Engineering. Most recently, Dr. Ross served as Special Assistant to the Provost for Inter-Institutional Research Initiatives and has been instrumental in enhancing research relationships and collaborations between UMBC and the University of Maryland, Baltimore, including the development of the UMB-UMBC seed grant program.

Dr. Ross has a distinguished record of scholarship in the field of bioengineering and engineering education, and is the author or co-author of over 50 peer-reviewed publications and the K-12 INSPIRES Curriculum. Since joining UMBC, she has been awarded nearly $7 million in external grants as PI to support her research. In 2008 Dr. Ross was elected as a fellow of the American Institute of Medical and Biological Engineering, and in 2013 she received the prestigious American Council on Education fellowship, the nation’s premier higher education leadership development program preparing senior leaders to serve American colleges and universities. Dr. Ross is known for her commitment to shared governance and for advancing opportunities for women and underrepresented minorities in engineering and information technology.

As dean of COEIT and as a member of UMBC’s senior leadership team, Dr. Ross will advance the mission of the university and the college by building strategically upon its strengths in the research and scholarly achievement of faculty, graduate and undergraduate students, while supporting continued success and excellence in the teaching and service missions of the college’s academic departments and programs. Dr. Ross will develop and promote activities that support and build a diverse faculty, and oversee faculty recruitment and development, promotion and tenure, and the appointment of department chairs and center directors. Dr. Ross will identify, develop, expand and sustain public and private partnerships and sources of research and extramural funding. She will collaborate with on-campus and off-campus partners and stakeholders to identify and engage in innovative strategies to strengthen research activity and infrastructure, technology transfer, venture creation and other economic development initiatives. She will also represent the interests of the college and the university to various constituencies both inside and outside of the UMBC community, and participate in campus-wide shared governance processes.

On behalf of the entire UMBC community I would like to express my sincere appreciation for the dedication and commitment of the members of the search committee, under the outstanding leadership of Professor Anupam Joshi, and for the contributions to this process made by our faculty, staff and students. UMBC is very fortunate to have someone of Dr. Julia Ross’s impressive experience and talent to serve as our next Dean of the College of Engineering and Information Technology. Please join me in congratulating her.

The Skills Veterans Gain While in the Service — Organization, Discipline and Problem-Solving — Translate Well Into the Tech and Private Sectors

Call them “vetrepreneurs.”

Two U.S. Army veterans — challenged by transportation nightmares in the Beltway around Washington, D.C. — have created a tech start-up that’s trying to alleviate commuters’ frustrations.

The RideScout app.

The idea came to fruition back in 2010 when Joseph Kopser was living in Arlington, Va., and had to navigate his way to the Pentagon — only five miles away.

The result was RideScout, a startup based in Austin, Texas.

Kopser and co-founder Craig Cummings created the RideScout app to solve D.C.’s inefficient use of transportation. The app, which the company dubs the “Kayak of ground transportation,” allows users to view in real time all ground transportation options available – buses, taxis, bikes, the Metro, walking, and more – as well as costs, routes and travel time. RideScout first launched in Washington in November 2013, followed by Austin, San Francisco, and most recently Boston. The company wouldn’t release any download numbers for its app from Apple’s App Store. Its Google Play page says it has between 5,000 and 10,000 downloads.

Kopser, the company’s CEO, says his app has “absolutely” become the app he had envisioned. It lessens transportation headaches, promotes energy efficiency, and benefits the public. The company’s spokeswoman, Rachel Charlesworth, says RideScout is “bringing people off the road and into more alternative modes of transportation.”

Kopser’s story is similar to many military veterans’ lives after service: Translating the skills they learned from Uncle Sam into usable solutions in small business and the private sector.

Building Teams, Solving Problems

Joseph Kopser

Kopser graduated from West Point in 1993 with an aerospace engineering degree and served in the U.S. Army for 20 years, retiring in 2013 as a lieutenant colonel. He is among a growing number of veterans translating military skills into successful tech careers in civilian life.

“I think most veterans share the same traits that I feel have given me a leg up as an entrepreneur,” he says. “One, we build teams. Two, we solve problems. Three, we don’t sweat the small stuff.”

Veterans — often noted for characteristics like discipline, organization, and solid problem-solving skills — make great entrepreneurs and employees. Companies like Cisco, Microsoft, LinkedIn, and Google boast veteran-focused initiatives, such as workshops and training events to cultivate veterans’ talents. Kopser says the more tech exposure the better for potential employees.

“You need to attend every possible meet-up, founders event, open house for techies, hack nights, etc.,” Kopser says. “You need to immerse yourself in the people, styles, attitudes, and norms of the tech community. It may seem like foreign culture at first, but once you understand the lingo, you’re a step ahead.”

Free trial on Treehouse: Do you want to learn the tech skills employers need today? Click here to try a free 14-day trial on Treehouse.

‘Embrace a Skill That You Love’

Veterans typically have hard-to-find tech skills, with exposure to the latest technology in the service. Garrett Deese, who served seven years in the Air Force, worked in cutting-edge weapons technology while communicating and collaborating with a variety of agencies.

“I learned how to leverage technology in order to accomplish squadron goals, whether that was troubleshooting a $67 million aircraft weapons system or creating a medical-tracking program in direct response to a command initiative,” Deese says.

Garrett Deese, in military and civilian life.

Translating those skills to a resume can often be difficult for many veterans. Deese attended an event called “Secrets from the other side of the interview table” held at Intuit headquarters in Mountain View, Calif., and organized by VetsInTech, a group that helps veterans land tech jobs. The event allowed Deese to work directly with Silicon Valley’s top recruiters and hiring managers who helped him repackage his experience and develop what he calls a “polished value offering pitch.”

Put simply: As an employee, he becomes a solution to an employer’s problem.

He says the experience laid “the foundations for what has turned out to be the career of my dreams at the best company in the valley.” He now works at Intuit as a marketing coordinator on the company’s talent acquisition marketing team. Deese applied many of his military skills directly to his new career.

“Every company is a tech company in one form or another,” Deese explains. “If you can apply your skill to business, then you can apply your skill to a tech environment. Don’t be intimidated by Silicon Valley – but instead embrace a skill that you love and find a way to apply it to a business problem.”

From the Military to Small Business

Mark Kelly

Many veterans also make great small-business owners. Nearly one in 10, or 2.4 million small businesses nationwide, are veteran-owned, according to the U.S. Census Bureau.

Former Air Force fighter pilot Mark Kelly chose the franchise route and is manager and owner of TeamLogic IT, a computer services company in Colorado. Kelly earned a computer science degree from the U.S. Air Force Academy.

Kelly says he wanted to start a small business instead of chasing a corporate career “so I could create jobs and employ veterans.” He looked at many franchise opportunities but naturally was drawn to IT.

“I find the IT arena intellectually stimulating and challenging,” Kelly says. As he did in the military, he follows a “mission-oriented approach” to running his business. “Our customers appreciate that,” he says.

Advice for Veterans: Learn Now, Don’t Wait on Employers

The Bureau of Labor and Statistics says the unemployment rate for veterans dropped from 6.2 percent in April 2013 to 5.6 percent a year later. While this is an improvement, many vets still struggle to find jobs. The growing tech field, training, networking, and job certification programs can offer veterans more career opportunities.

In 2013, G.I. Jobs asked the nation’s military-friendly employers to list the top 20 hot jobs for which they were recruiting America’s veterans. No. 1 on the list was IT specialist, with an average salary of $69,903. And while G.I. Jobs says some IT employers want candidates with advanced degrees, “experts say certification is often the most important qualification.”

Chris Galy, an advisory board member of VetsInTech and the vice president of talent acquisition at Intuit, says his company has a strong track record of hiring vets and is always seeking veterans for all roles.

He says veterans sometimes don’t carry those “ready-now” skills when transitioning out of the military because many tech jobs are outsourced to government contractors: “The military has solid IT infrastructure, but the development and design work goes to the contractors.”

VetsInTech also works with the Department of Defense and Veterans Affairs to get more soldiers interested in tech careers before they leave the service.

But Galy believes today’s service members “should be experimenting and tinkering with building technical development and design skills” before leaving the service.

“I get why they don’t ­– they are defending freedom,” he says. “But if they want to break into the places where there are high-paying technical careers, they can’t wait for a company to hire them to be trained on the right skills, mindset, and capabilities.”

The post Technology Jobs a Secure Bet for Military Veterans appeared first on Treehouse Blog.

As web designers, it goes against our nature to restrict access to our code. We’re taught to maximize compatibility of our websites and strive for backwards compatibility wherever possible; to create progressively enhanced and gracefully degrading sites. If we can make it work on IE1, that’s no bad thing…

The problem, at least for WordPress developers, is that WordPress is a monster; it will swallow you and your lovely little project whole if you let it.

When you’re producing a WordPress theme, either as a bespoke job for a specific client, or to resell on one of the many WordPress marketplaces, your goal can never be to cover everything that has ever been part of WordPress. Instead, your goal should be to use the key functions, features and filters in the best way possible to maximize the current codebase.

As a professional, your time is money, the longer you spend on your development the less profit you make; it’s a simple equation. The size of WordPress means that you can easily spend 80% of your time catering to 20% of the market. Far better to spend 80% of the time catering to 80% of the market. In terms of quality product and your own bank balance, it’s the surest approach.

In 14 key WordPress functions to jump-start theme development we went through some of the functions that, without fail, I include in my starter theme’s functions.php. In this article, we cover another crucial function that should go on your list of key WordPress functions. It will save you both head, and heart, aches down the road.

WordPress already limits backward compatibility

When an avoidable exploit brings your client’s site (that runs on your theme) down to its knees, who do you think they’ll call? Let me save you the guesswork: its you, m’kay? It doesn’t matter that whatever’s causing the problem isn’t at all your fault, to the client, it only matters that you’re the closest link to the possible problem. The last thing they remember doing is hiring you to build a new theme for them.

If upon inspection you find that the client’s site still runs on WordPress older than the current stable version, take a few seconds and slap yourself across the face: left cheek first, then right cheek. Your theme should not allow them to do that!

If you’ve been paying attention, as of about Version 3.6 of WordPress, you’ll have started to notice a function pretty high up in the default theme’s functions.php that restricted use of the default theme to versions of WP newer than 3.6. In fact it’s the second function defined in Twenty Fourteen’s functions.php!

That function looks something like this:

/** * Twenty Fourteen only works in WordPress 3.6 or later. */ if ( version_compare( $GLOBALS['wp_version'], '3.6', '<' ) ) { require get_template_directory() . '/inc/back-compat.php'; }

We’re interest in the contents of that back-compat.php file. The functions defined there are what we’re after for use with our own themes.

No country for old WordPress

It almost doesn’t matter what features you’re implementing but if possible, limit the use of your themes to reasonably new versions of WordPress. That’ll make sure the end user updates their installation (all the better for them in terms of security) and ensures that you’re spending the majority of your development time on the majority of users.

Defining the function

To achieve this, we use the PHP version_compare() function to check the currently installed version of WordPress against the latest available version making sure that the latest installed version isn’t lower than 3.6—make your own selection on what version to test for, 3.6 isn’t a recommendation, just an example. That function looks something like this:

if ( version_compare( $GLOBALS['wp_version'], '3.6', '<' ) ) { // do (or do not) something function butter_never_get_old() { switch_theme( WP_DEFAULT_THEME, WP_DEFAULT_THEME ); unset( $_GET['activated'] ); add_action( 'admin_notices', 'butter_step_your_game_up' ); // we add some admin notices here (we haven't defined this function yet) } add_action( 'after_switch_theme', 'butter_never_get_old' ); }

What this function does is define an action function butter_never_get_old() that will only run when the after_switch_theme() core function is called. So far, the butter_never_get_old() function, which sits inside our version check, does the following:

1. Checks what version of WordPress is currently installed
2. Makes sure that version is newer than Version 3.6
3. Runs the cosmically relevant If/Else:
4. If it is: Activate the theme.
5. If it is not: Do not activate the theme. Instead re/activate the default theme and, to be nice, output a nice little message that instructs the user to upgrade their ridiculously old installation. Come on, Grandpa!

Nudge, nudge! Upgrade that s#%*

Next, we need to define the butter_step_your_game_up() function which prints out our admin notices if something should go awry which would ostensibly mean that the WP version is older than we’d like.

function butter_step_your_game_up() { $update_message = sprintf( __( 'This theme requires WordPress version 3.6 or newer. You're currently using version %s. Please upgrade.', 'butter' ), $GLOBALS['wp_version'] ); printf( '<div class="error"><p>%s</p></div>', $update_message ); }

The above butter_step_your_game_up() function sets our translatable error message string in the $update_message variable as defined (this theme requires… etc) which is then printed and displayed to the user (from within the earlier defined butter_never_get_old() function ) and visually, inside a div with class of ‘error’. This message, you can then style as desired.

So, all told, our function should look like this:

if ( version_compare( $GLOBALS['wp_version'], '3.6', '<' ) ) {     // This function deactivates our newly activated theme if WP isn't newer than 3.6     // It then re/activates the default theme     function butter_never_get_old() {         switch_theme( WP_DEFAULT_THEME, WP_DEFAULT_THEME );         unset( $_GET['activated'] );         add_action( 'admin_notices', 'butter_step_your_game_up' );     }     add_action( 'after_switch_theme', 'butter_never_get_old' );     // This function, called from within the above function     // outputs the relevant message that nudges the theme's user     // to upgrade     function butter_step_your_game_up() {         $update_message = sprintf( __( 'This theme requires WordPress version 3.6 or newer. You are currently using version %s. Please upgrade!', 'butter' ), $GLOBALS['wp_version'] );         printf( '<div class="error"><p>%s</p></div>', $update_message );     } }

With that in place, you’re ensuring that your theme cannot be activated on WordPress installations older than version 3.6.

Keep it clean

As far as possible, you should keep your functions.php clean. It should be clean in the sense that you should be able to quickly scan and immediately discern what each function is doing. To that end, we might want to move our function into an includes folder.

If you haven’t already, create a folder and name it ‘inc’ inside your theme’s directory. Inside that, create a php file and name that back-compat.php. Copy and paste the contents of the function we just created leaving only the version_compare() in functions.php:

if ( version_compare( $GLOBALS['wp_version'], '3.6', '<' ) ) { require get_template_directory() . '/inc/back-compat.php'; }

Inside the /inc/back-compat.php file, paste the functions we defined earlier:

function butter_never_get_old() { switch_theme( WP_DEFAULT_THEME, WP_DEFAULT_THEME ); unset( $_GET['activated'] ); add_action( 'admin_notices', 'butter_step_your_game_up' ); } add_action( 'after_switch_theme', 'butter_never_get_old' ); function butter_step_your_game_up() { $update_message = sprintf( __( 'This theme requires WordPress version 3.6 or newer. You are currently using version %s. Please upgrade!', 'butter' ), $GLOBALS['wp_version'] ); printf( '<div class="error"><p>%s</p></div>', $update_message ); }

Conclusion

It’s always a tough sell to tell a good developer that they have to limit the compatibility of their code. But the sheer size of the WordPress codebase, especially when you focus on backwards compatibility, makes limiting the scope of your theme a practical necessity. WordPress themselves doing so should highlight its validity.

And now, freed from the constant obstacles presented by out of date code, you can focus your energies where they belong: on harnessing the awesome power of WordPress.

Featured image/thumbnail, uses compatibility image via Shutterstock.

The Ultimate Logo Mock Up and Design Kit – only $24!

MS Thesis Defense

Recoloring Web Pages For Color Vision Deficiency Users

Vikas Bansal

11:00am Thursday, May 8, 2014, ITE346, UMBC

Color vision begins with the activation cone cells. When one of the cone cells dysfunction, color vision deficiency (CVD) ensues. Due to CVD, users become unable to differentiate as many colors a normal person can. Lack of this ability results in less rich web experience, incomprehension of basic information and thus frustration. Solutions such as carefully choosing colors while designing or recolor web pages for CVD users exist. We first present the improvement in the time complexity of an existing tool SPRWeb to recolor web pages. After that we present our tool which explores the foreground-background relationship between colors in a web page. Using this relationship we propose an algorithm which preserves naturalness, pair-differentiability and subjectivity. In the last part, we add an additional step in to algorithm to ensure that the contrast in the parsed color pairs meets the required W3C guidelines. In evaluation, we found that our algorithm does significantly better in preserving pair-differentiability and produces lower total cost solutions than SPRWeb. Quantitative experimentation of modified algorithm shows that contrast ratio in each replacement pair is more than 4.5 as required for readability.

Committee: Drs. Lina Zhou (co-chair), Tim Finin (ch-chair), Yelena Yesha, Dongsong Zhang

A while ago, I was working on a website that required a number of icons. “No problem,” I thought. “I know how to handle this. I’ll use an @font-face icon set for high-resolution screens. It’ll be a single file, to reduce HTTP requests, and I’ll include just the icons that I need, to reduce file size.”

“I’ll even use a Unicode character as the base of the icon, so that if @font-face isn’t supported, then the user will still see something like the intended icon.” I felt pretty pleased with myself.

That is, until I ran the page in the device lab.

On some devices, a number of the icons weren’t showing. Yet on the same devices, others were, so clearly it wasn’t an @font-face issue. It must have been the underlying Unicode.

What To Do?

• I could have used ligatures for the @font-face icon. These are great for accessibility but aren’t supported in Internet Explorer 9 or earlier.
• I could have used the default “blank” Unicode characters (the PUA ranges), which apps such as IcoMoon default to. But, again, Internet Explorer has issues, and if the user has set a default font (if they are dyslexic, for example), then they wouldn’t see anything meaningful.
• There are some good arguments for using SVG, but I like the flexibility of @font-face: Changing the color on hover is very easy, for example, and @font-face icons will render with subpixel anti-aliasing, whereas SVG uses grayscale.

I was happy with the underlying Unicode characters because they gave a nice fallback for users on Windows Phone 7, Opera Mini and old BlackBerrys that don’t support @font-face. Instead, I wanted to determine which Unicode characters I could safely use.

So, I started doing some testing. And that led to some more testing, and then some more.

So far, I’ve looked at 107 Unicode characters on 78 devices and 5 screen readers. I’ll be honest — it’s not the most fun I’ve ever had. So, I’ll save you the trouble and share some of the problems and potential solutions that I’ve come across.

Why Bother?

But before we get to that, let’s just make sure that this is all worthwhile.

Left to right: @font-face icon using a ligature in Chrome; @font-face icon using a ligature in Internet Explorer 9 (yep, nothing there); @font-face icon using a Unicode fallback in Opera Mini; @font-face icon using a PUA code point in Opera Mini (yep, nothing there). (Large version)

Left: SVG with grayscale anti-aliasing. Right: @font-face icon with subpixel rendering. (Both in Firefox). (Large version)

(Oh, and if I hear murmurings of “Opera Mini? No one uses that,” then consider that there are 70 million more Opera Mini users than iPads in the world.)

To my mind, using the underlying Unicode character seems the most robust approach, offering a visual icon to the greatest number of devices and browsers.

How Do You Do It, Then?

If you’ve not used Unicode characters with @font-face icons, don’t worry. Tools like IcoMoon make it simple. When you’ve selected the icons that you want to use and clicked to generate the font, you’ll see a page that shows all of your chosen icons, with their name and the Unicode code point that they will be mapped to. This will usually be something like e600, and this number is what you’ll need to replace with the hexadecimal value of your chosen Unicode character.

Tools like IcoMoon make it simple to generate icon fonts. (Large version)

So, how do you know which Unicode character to use? You could go through one of the many resources that list all 110,000 characters, but you’ve probably got better things to do. Shapecatcher makes life a bit easier: Draw the shape you’re after, and it will return a list of similar-looking characters.

Shapecatcher will return a selection of similar looking icons for you. (Large version)

Pick the one you like best, copy the Unicode hexadecimal value, and paste it into IcoMoon. Once you’ve done this for all of your icons, download the @font-face package as normal.

So, Which Characters Should You Use?

Well, I’ll have to defer to Jeremy Keith’s answer for everything about the Web: “It depends.” In my testing, support for any given Unicode character varies hugely (and by “support,” I mean that either the @font-face icon appears or that the underlying Unicode character appears, rather than the user seeing an empty rectangle or a question mark or nothing at all). Even Unicode characters in the same “block” of related symbols often have quite different levels of support.

But I can provide a little help. Once you know which Unicode character you want to use, run it through Unify, which will give you a support score based on the devices that I’ve tested with so far.

If you’re happy with either the @font-face icon or the Unicode character being displayed, you should see very high levels of support. Some icons work on everything that I’ve tested so far.

The big exception is Emoji characters, which I would stay away from. Around half of the devices that I’ve tested on don’t show the @font-face icon, and many don’t show anything meaningful at all. Additionally, iOS replaces them with fixed-size colored graphics, so trying to scale them with font-size won’t work.

Variation in Emoji characters. Left to right: Firefox (Windows 7), Chrome (Windows 7), Chrome (Android 4.2.1), Opera (Windows 7) and Safari (iOS). (Large version)

Also, if a device can render a Unicode character, it will usually also be able to render an @font-face icon that uses that character. So, you’ll need to decide on the tradeoff: Using an icon font gives you more control over the design, but then you’d be adding to the page’s weight and delaying the rendering of the icon until the font has loaded.

If you’re just using a Unicode character directly, then be prepared for a variety of visual styles. Even on the same computer, browsers can render the same character in quite different ways.

Unicode character 260E shown in Firefox, Chrome, Internet Explorer and Opera on the same Windows 7 machine, and on iOS. (Large version)

In many projects, the consistency and control you get from using an @font-face icon is worthwhile. Putting only the icons that you need in the font file will minimize downloading time.

Saying anything more about @font-face icons is pointless because Zach Leatherman has written such an excellent and well-researched article.

Accessibility

Zach looks in depth at the accessibility implications of using icons in this way, and I’d like to add a few thoughts.

There are two main problems here: The screen reader will either completely ignore the icon (which would leave the user not knowing that there is something there to interact with) or announce something seemingly irrelevant. For example, if you used Unicode character 2261 for your “burger” icon, it would either be ignored or be announced as “Equal” or “Identical to”, depending on the screen reader. Neither of these would help the user understand what this element does.

The best approach depends on what the icon is for. If it merely adds visual flourish to a text label or heading, then I’d recommend hiding the icon from screen readers. In this case, rather than adding icon fonts directly to the element in the standard way (i.e. by using the :before or :after CSS pseudo-element), add it to a span inside the element. This way, you can add aria-hidden="true" to the span, which will prevent it from being announced in a reasonable number of screen readers.

<span aria-hidden="true">≡</span> Menu
    

However, if the icon will be used on its own, without anything else to provide meaning or context, then I’d recommend hiding the icon as before but adding a text label that is hidden visually. This will provide a cue that there is something to interact with.

<style>
        .visiblyHidden {
        /* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
            position: absolute;
            overflow: hidden;
            clip: rect(0 0 0 0);
            height: 1px; width: 1px;
            margin: -1px; padding: 0; border: 0;
        }
    </style>
    
    <span aria-hidden="true"> ≡ </span><span class="visiblyHidden">menu</span>
    

Does font-family Help?

I’ve heard the recommendation that you should include fonts like Arial Unicode MS in a font-family stack that is being used to display Unicode symbols, but that doesn’t guarantee that the symbol will appear for everyone. If a browser can’t find a font with the required Unicode character from those you’ve listed in the font-family declaration, then it will try to find any font in the OS that will display it.

Consistency is hard to come by, though, because it will depend on the fonts available on that particular device and on the browser being used. Browser manufacturers are free to look for any matching fonts however they think best — and for the sake of performance, the browser might stop searching if it’s taking too long.

By all means, include Arial Unicode MS or Segoe UI Symbol in a font-family declaration if you like how they render the symbols you’re using, but you’ll be relying on that font being installed on the device. If you want to control how the symbol looks, you’re best off with an @font-face icon.

Detecting Unicode Support

So, can JavaScript come to the rescue? Well, Modernizr does have a couple of tricks up its sleeve. One approach compares the width of a commonly supported character against one that’s likely to produce a fallback character and, if different, determines that the first character has rendered as expected.

Another focuses on trying to determine Emoji support by drawing the character onto a canvas element and then checking a single pixel to see whether it’s been filled in by the character. The problem, as we’ve seen, is that Unicode support isn’t a boolean; just because a browser displays one character doesn’t mean that it will display another. So, I wouldn’t rely on these methods generally, but they might be useful in some circumstances.

Encoding Your Unicode

Mentioning encoding here would probably be worthwhile if you are working with Unicode. Encoding tells a browser how to interpret any Unicode characters on a page. If the encoding used by your text editor differs from the settings of your end user and there are no instructions to help the browser make sense of it, then the user will see a lot of seemingly random characters or question marks.

An example of the variation in glyphs from a single Unicode code point with different page encodings. (Large version)

Fortunately, pretty much everything on the Web these days uses UTF-8, so this isn’t the headache it used to be. However, it doesn’t hurt to make sure, and this is why you’ll hear of the recommendation to include <meta charset="utf-8"> in the <head> of your documents. If you’ve specified the encoding in the HTML file, then you don’t need to specify it again in any linked CSS files — it will be assumed to be the same.

If you’ve done this and you’re still seeing strange characters, then check that your HTTP headers are set to UTF-8 as well. Any encoding set there will override the meta charset declaration.

However, if you do have to work with a different encoding type, then avoid “embedded” characters (i.e. just pasting the single character shape directly into the text editor). If you use the full numerical reference, then the character will be unaffected by the document’s encoding type.

In other words, if you want to use 2665 for a heart icon, then use &#x2665, not ♥. Embedding symbols in this way is the safest approach, but adding accents and so on in body copy is not recommended because it will make the code harder to read and maintain. In this instance, getting the encoding right is better.

Hand-Picking Fonts

One feature of @font-face that’s often overlooked is unicode-range. This allows you to specify that a particular font is being used for just a few Unicode characters.

But why would you want to?

Perhaps you have found the perfect font for your body copy, but you would prefer one or two punctuation marks from a similar font, or perhaps you want to use old-style figures but your body font doesn’t include them. Using unicode-range lets you use that alternate font for just those characters that you want to swap out.

You may specify a single character, a comma-separated list or an entire range of characters to be rendered in the alternate font.

It has a slightly different syntax from other methods of working with Unicode. You’ll need to add U+ before the character’s hexadecimal number. So, if you wanted a different font for all of your numbers (which are represented in Unicode between 0030 and 0039), you’d use something like this:

@font-face {
       font-family: 'oldStyleFigures';
       src: url(fonts/old-style-figures.ttf) format("opentype");
       unicode-range: U+30-39;
    }
    

Then you would add this:

p {
       font-family: oldStyleFigures, Arial, sans-serif;
    }
    

This means that all paragraph text will use Arial, except for numbers, which will use the oldStyleFigures font.

The downside? Of course, there’s a downside. It still doesn’t work in Firefox — the alternate font will be applied to all characters, not just the ones you’ve specified in the range.

Top to bottom: no unicode-range used; unicode-range added for numerals; unicode-range for numbers viewed in Firefox. (Large version)

However, Drew McLellan has a workaround for the lack of support in Firefox.

Unicode Syntax Cheat Sheet

How you add a Unicode character will determine the method that you need to refer to it. Here’s a quick summary:

<span>&#x2665;</span>

<span>&#9829;</span>

.heart:before { content: '\2665'; }

@font-face {
    font-family: heartFont;
    src: url(fonts/heart-font.ttf) format("opentype");
    unicode-range: U+2665;
    }

It Doesn’t End There

That’s it for now, but plenty of useful articles and tools are out there. Here are a few that might help you out:

• “Articles, Best Practices and Tutorials,” W3C Internationalization Activity
  A large collection of articles covering encoding and internationalization topics
• “Bulletproof Accessible Icon Fonts,” Zach Leatherman, Filament Group
  In case you haven’t read Zach’s article about icon fonts
• “Creating Custom Font Stacks With Unicode-Range,” Drew McLellan, 24Ways
  More detail on using unicode-range
• Icomoon
  A great tool to build a custom icon font
• Shapecatcher
  Really useful for visually finding a particular Unicode character
• Unify
  My resource gives you an idea of how supported a particular Unicode character is across browsers and devices.

(ds, il, al, ml)

The post Unicode For A Multi-Device World appeared first on Smashing Magazine.

The Efficient XML Interchange Working Group has published a Proposed Recommendation of Efficient XML Interchange (EXI) Profile for limiting usage of dynamic memory. This document describes a set of options that can be used to define profiles of the EXI 1.0 format suited to applications involving devices with dynamic memory constraints. Comments are welcome through 13 June 2014. Learn more about the Extensible Markup Language (XML) Activity.