The Nirmala Challenge. or One thing not to do when building a user interface

Similar documents
Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group

Introduction to Unicode. By: Atif Gulzar Center for Research in Urdu Language Processing

Saving work in the CMS Edit an existing page Create a new page Create a side bar section... 4

coral SOFTWARE LOCALISATION LANGUAGE SERVICES WEBSITE TRANSLATION MEDICAL TRANSLATION MULTILINGUAL DTP TRANSCRIPTION VOICEOVER & SUBTITLING

How to resize, rotate, and crop images

Semester : I. Semester : II. Subject Code. Date & Session. Subject Title. LAT001 Tamil LTE002 Telugu

Internationalization & Localization

Identity Guide. HHMI Identity Guidelines V 1.2 1

To Begin Customize Office

Office of Creative Services. Tuck Visual Identity. A reference guide to Tuck s logos and visual identification standards

Step 2: Headings and Subheadings

UNIVERSITY OF MYSORE B Com. ( ANNUAL ) DEGREE EXAMINATIONS - MAY / JUNE 2014 TIME TABLE

Most laptops allow you to plug in a second monitor, which can be a TV screen or Projector I will refer to a monitor in this document.

Tips for optimizing your publications for commercial printing

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Red Hat Enterprise Linux International Language Support Guide

REVISED JUNE PLEASE DISCARD ANY PREVIOUS VERSIONS OF THIS GUIDE. Graphic Style Guide

I ntroduction. Accessing Microsoft PowerPoint. Anatomy of a PowerPoint Window

DRH specification framework

TRIDINDIA IT TRANSLATION SERVICES PRIVATE LIMITED

NDSU Technology Learning & Media Center

3. Locate the different selections of Styles from the Home Tab, Styles Group

Macros in Word & Excel

Speaking your language...

Using Microsoft Word to Create Your Theses or Dissertation

BRAND IDENTITY GUIDELINES. May 2016

How to create business cards manually in WordPerfect without using a template Project

How To Design A Website For The Decs

Branding Guidelines POWERHANDZ. Company: 1.0 Introduction 2.0 The Logo Design 2.1 The Logo Usage 3.0 Color Scheme 4.0 Typography 5.

WIRELESS and mobile technology

Planning Terrestrial Radio Networks

National Language (Tamil) Support in Oracle An Oracle White paper / November 2004

What Resolution Should Your Images Be?

Keywords : complexity, dictionary, compression, frequency, retrieval, occurrence, coded file. GJCST-C Classification : E.3

CREATING POSTERS WITH POWERPOINT

Developing and Implementing Windows-Based Applications With Microsoft Visual C#.NET and Microsoft Visual Studio.NET

Challenges of Multilingual Web in India : Technology Development & Standardization Perspective

PLAY VIDEO. Close- Closes the file you are working on and takes you back to MicroStation V8i Open File dialog.

Brand Style Guide 2010 v.1

Are you predominantly theory X or theory Y? Are you an autocrat or democrat? Are you task-oriented or people-oriented?

DIRECTIONS FOR SETTING UP LABELS FOR MARCO S INSERT STOCK IN WORD PERFECT, MS WORD AND ACCESS

India College of Ministry (ICoM) (A School of Global University)

A big behind gets noticed!

Brand identity guidelines

PRICE LIST. ALPHA TRANSLATION AGENCY

Brand Identity Guidelines

BRANDING GUIDELINES DESIGNED & DEVELOPED BY FRUITION CONTACT ICON EYECARE BRANDING GUIDELINES. Online. Address. Phone

A series Metric (cm) Imperial (inch)

To launch the Microsoft Excel program, locate the Microsoft Excel icon, and double click.

Overview of Microsoft Office Word 2007

1.1. Design elements

HOW TO PRINT YOUR DIGITAL SCRAPBOOK

Using this Brand Guide

Word basics. Before you begin. What you'll learn. Requirements. Estimated time to complete:

Style Guide Provided courtesy of Innovative Emergency Management Inc.

Brand Standard Guide

What's New in QuarkXPress 10

Microsoft Excel 2007 Level 2

Merging Labels, Letters, and Envelopes Word 2013

01/42. Lecture notes. html and css

Brand and Identity Guidelines

Discovery Day. Tips for Successful Posters

Website Builder Overview

SETTING UP A MULTILINGUAL INFORMATION REPOSITORY : A CASE STUDY WITH EPRINTS.ORG SOFTWARE

When older typesetting methods gave

Transport for London DESIGN STYLE GUIDE

Brock University Content Management System Training Guide

Using Multimedia with Microsoft PowerPoint 2003: A guide to inserting Video into your presentations

Microsoft Band 2 Experience Design Guidelines

BASIC VIDEO EDITING: IMOVIE

LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team. Overview

Making a Poster Using PowerPoint 2007

Medill Logo and Branding Guidelines

Personal Computer Checklist (Windows 10 and Internet Explorer 11.0) RealPage, Inc.

Excel 2003 A Beginners Guide

General Electric Foundation Computer Center. FrontPage 2003: The Basics

Digital Messages GUIDELINES

Excel 2007 A Beginners Guide

Divide your material into sections, for example: Abstract, Introduction, Methods, Results, Conclusions

Inventory of Romanization Tools

Microsoft Word 2010: How to Resize and Move Clip Art

Tips for Making Scientific Posters

McAFEE IDENTITY. October 2011

Building Better Dashboards PART 1: BASIC DASHBOARDS

F-Series Desktop User Manual F20. English - Europe/New Zealand

Excel Project From the Start menu select New Office Document. If necessary, click the General tab and then double-click Blank workbook.

Safety Zone and Minimum Size (Vertical)

Unicode in Mobile Phones

ABOUT THIS DOCUMENT ABOUT CHARTS/COMMON TERMINOLOGY

Adjunct Assistant Professor Gayle Rembold Furbert. Typography II. County College of Morris Graphic Design Degree Program

HIT THE GROUND RUNNING MS WORD INTRODUCTION

ELFRING FONTS UPC BAR CODES

Digital Commons Design Customization Guide

Microsoft Publisher 2010 What s New!

Customer Web Site Training

Windows Presentation Foundation Tutorial 1

Logo files are available for download at Brand.amadeus.com

MS Word 2007 practical notes

Transcription:

The Nirmala Challenge or One thing not to do when building a user interface

Problems in search of a solution Indic scripts in the pre-windows 8 user interface displayed in a hodgepodge of different fonts presenting a range of problems: unharmonious with the Segoe UI typeface used for European languages and central to the Windows experience branding; varying styles and weights originally intended for document use and not optimised for UI use; inconsistent scaling factors, resulting in mismatched visual type size when combined with Segoe UI; inconsistent vertical metrics, causing problems in scaling of UI items or clipping of Indic glyphs. 2

The original project brief Design new Regular and Bold weight types for six Indic scripts: Bengali, Devanagari, Gujurati, Malayalam, Odia (Oriya), & Telugu; target specific UI localisations: Bengali (Indian & Bangladesh), Gujurati, Hindi, Konkani, Malayalam, Odia, & Telugu; target core Windows UI text size (9pt @ 96ppi, i.e. 12ppem), plus smaller size used in some Office UI elements; hint for screen legibility, targeting GDI and DWrite ClearType renderers; harmonise style, scale and weight to Segoe UI fonts; use vertical metrics of Segoe UI fonts. 3

The original project brief Design new Regular and Bold weight types for six Indic scripts: Bengali, Devanagari, Gujurati, Malayalam, Odia (Oriya), & Telugu; target specific UI localisations: Bengali (Indian & Bangladesh), Gujurati, Hindi, Konkani, Malayalam, Odia, & Telugu; target core Windows UI text size (9pt @ 96ppi, i.e. 12ppem), plus smaller size used in some Office UI elements; hint for screen legibility, targeting GDI and DWrite ClearType renderers; harmonise style, scale and weight to Segoe UI fonts; use vertical metrics of Segoe UI fonts. 4

The thing not to do Design all the dimensions of UI elements windows, tabs, dialogue boxes, menus, etc. around the metrics of a particular font for European languages. This will cause localisation problems. جट ढ ل ป ପ ସ Help! চ ঞ བ 5

The creeping project brief Add support for four additional scripts: Gurmukhi, Kannada, Sinhalese, & Tamil; target range of larger sizes for use in Metro UI, Windows phones and other higher resolution devices. Surprise! New Metro asymmetric greyscale rendering. 6

The design approach or, How do you want your compromises? Maximise legible size per script, ensuring key details can be cleanly rendered at initial target sizes; design close to the full pixel y-direction grid at the primary target size (12ppem), and to the full or sub-pixel x-direction grid, but flexibly according to the individual scripts; deal with descender height restriction issues on a script-by-script basis, trying to find the best compromise for the individual writing system; apply strong y-direction hinting to force details within device metrics at specific sizes; fail in the best way possible. 7

The weight compromise Loss of weight harmony across scripts in order to maintain detail legibility at primary target size; non-traditional weight distribution for some scripts in Bold font due to asymmetric rendering models. Ep ਢ ஜ Ep ਢ ஜ 8

The weight compromise Loss of weight harmony across scripts in order to maintain detail legibility at primary target size; non-traditional weight distribution for some scripts in Bold font due to asymmetric rendering models. Ep ਢ ஜ Ep ਢ ஜ 9

The weight compromise Loss of weight harmony across scripts in order to maintain detail legibility at primary target size; ଚ non-traditional weight distribution for some scripts in Bold font due to asymmetric rendering models. Ep ਢ ஜ Ep ਢ ஜ 10

11

12

Challenges and solutions ट ય ય 13

Challenges and solutions ପପ ସପ ସ ପ ସ 14

Challenges and solutions ഷ 15

Challenges and solutions డ డ 16

Challenges and solutions ණ ණ 17

Thoughts to take away Localisation means more than translation; dimensions of UI elements need to be localised or to be made adaptive; low resolution user interfaces are not scaleable to high resolutions: fonts designed to work as well as possibly in the constraints of coarse ppem grids will not appear well in high resolution devices. 18