Q&A: What’s the difference between UI ‘Flipping’ and UI ‘Mirroring’?


What's the difference between UI 'Flipping' and UI 'Mirroring'?


-- Wow, it seems like forever since we've had a posting out here.

-- Yeah, well if you weren't so distracted with other things – it would be much easier to FOCUS!

-- Oh focus on this, Smarty Bulb! What's the difference between 'Flipping' and 'Mirroring' – isn't it the same thing?

-- No, it's not the same thing. At first glance – it might APPEAR to be the same thing – but actually – it's very different – let me tell you about it!

Among the new and cool features in Office 2010, is the new look of Office dialogs for Right-to-Left (RTL) languages like Arabic. Dialogs in RTL languages should flow from right-to-left, which requires extra work to implement. Traditionally we have used a technique called 'Flipping', where we manually change the position of the controls so that they flow right-to-left.

Here is an example of how a dialog appears before and after flipping:

   Find and Replace dialog in Left-to-Right layout (LTR) in Office 2007 and older versions.

   Find and Replace dialog in Right-to-Left (RTL) Flipped layout in Office 2007 and older versions.

Even though most of the dialog looks RTL, there are still several controls which we cannot reposition manually. As you can see:

  1. The title is right aligned
  2. The Close and Help buttons are still not positioned to the top left
  3. The Tabs on the dialog are still LTR, and the button shadows still fall on the right side.

So while this dialog is 'flipped' – it still has some shortcomings of where it should be for a true Right-To-Left dialog. Flipping also involved a lot more manual processes.

For Office 2010, we invested in a technology called 'Mirroring' provided by the cool people over in the Windows group. In normal dialogs, controls are positioned on a grid which flows from left to right. If we tell Windows to treat the dialog as mirrored, Windows actually mirrors the underlying grid so that it flows from right to left. This means that all the controls are automatically repositioned without any manual effort. This technology creates much more accurate RTL dialogs and also reduces the manual work required. Hey – we're all into efficiency!!

Here is same dialog before and after using mirroring in Office 2010:

    Find and Replace dialog in Left-to-Right layout in Office 2010.

    Find and Replace dialog in Right-to-Left Mirrored layout in Office 2010.

This new technology is now implemented and integrated in almost all RTL Office dialogs, in all major applications.

-- Ok – that is cool to know the difference between 'Mirroring' and 'Flipping'. Too bad your MIRROR FLIPS every time you look into it!

-- Oh you are just soooo funny. NOT!

-- Hee hee hee, I am very funny, aren't I!

-- How about you take that humor and answer a question!

-- Indeed I will! Bring it on!!

Keep the questions coming!

The Twins

--Oh! I almost forgot! I have to thank Mohamed Elkugia for help with answering this question, and Sandy Rivas and Steve Condie for lending a hand!--

--Uh huuuuh! I knew you didn't do it by yourself!–

-- As I mentioned, Mohamed and Sandy are Software Development Engineers in Test, and Steve is a Software Development Engineer. They are all with the Office Global Experience Platform team at Microsoft.--

The example companies, organizations, products, domain names, email addresses, logos, people and events depicted herein are fictitious. No association with any real company, organization, product, domain name, e-mail address, logo, person, or event is intended or should be inferred.