Is it possible to create an Right to Left (RTL) tile for Windows 8 apps?
The tiles switch to RTL direction when one changes the windows settings but I need to force it even on non-RTL machines.
For tile or toast notifications, setting the lang attribute to an RTL language (e.g., "ar-SA") on either the <binding /> or <visual/> element in the notification XML will perform layout appropriate for the specified language.
See this MSDN article. http://msdn.microsoft.com/en-us/library/windows/apps/jj712702.aspx
You should be able to use UnicodeDirectionMarkers.LeftToRightDirectionMarker to mark the text and reverse it.
Related
Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don't see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don't want to use a jack hammer for a nail but we might have to if this is what's required. I would think it would be automatic.
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it's not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don't have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.
I have used react-native-i18n package for supporting international language. It is working but now I want my application can change RTL and LTR inside application according to language without changing device language. I used native base components in my application.
So I cannot change their styling and If it is possible then How?
I have created settings option to change language and it is changing but how to change LTR to RTL and RTL to LTR all the components of application.
If there is any solution please let me know.
from the react-native docs:
direction specifies the directional flow of the user interface. The
default is inherit, except for root node which will have value
based on the current locale.
this means if you change the top View style direction to "rtl" all child components should inherit the direction.
I am using FireBreath to create a cross browser plugin which makes use of some native libraries for the respective platform (some .NET based DLLs for Windows and Objective-C based dylibs/frameworks for Mac). Native libraries display UI screens. In order to improve usability, if the user has a multi/extended monitor setup, i would like the native UIs to appear on the same screen as the browser window is currently on.
If an identifier to the monitor with the browser window can be retrieved, that can be passed down to the native components which can be configured to display their UIs on that monitor. I have used FireBreath's getWindowPosition() method to get the rect coordinates of the plugin and used that info to identify the correct monitor in the Windows platform.
However, the coordinates returned in Mac seems to be always 0 (or 1) irrespective of monitor on which the browser window currently resides. I understand that we have to configure an event model and a drawing model in order for this to work in Mac. I have tried following event/drawing model combinations without much success.
1) Cocoa/CoreGraphics
2) Carbon/CoreGraphics
Any help in this regard is much appreciated. Also please do share if there are other approaches to achieve the same. What i want to achieve is to identify the monitor on which the current active browser window resides in Mac. I am unsure at this point, but it maybe possible to achieve this at Objective-C level (without any changes at FireBreath level). Also please note that i want to support Safari, Firefox and Chrome browsers.
You won't like this answer, but simply put you can't do that on Mac. The problem is that with CoreGraphics you are only given a CGContextRef to work with, and it doesn't know where it will be drawn. It was technically possible in older browsers to get an NSWindow by exploiting some internal implementation details, but many browsers that's no longer possible and it was never supported.
Other drawing models are the same; CoreAnimation you have a CALayer but it doesn't know which screen or monitor it is drawn to. I personally think it's a bit annoying as well, but I do not know of any way to find out which monitor your plugin is rendered to, particularly since most of them actually copy the buffer to something else and render in a different process.
I did manage to come up with a workaround and i am just replying here for the completeness of the thread. As #taxilian explained, it is not possible to retrieve plugin coordinates using the window reference. As an alternative approach, Javascript 'Window' object has 2 properties called 'screenX' and 'screenY' that return X and Y coordinates of the browser window relative to the screen. If the user has an extended monitor setup, these are the absolute coordinates with respect to the full extended screen. We can use these values to determine the monitor with the browser window (if the X coordinate is outside the bounds of the primary monitor's width, then the browser should essentially be on the extended monitor). We can retrieve DOM properties from Firebreath as explained in the following link:
http://www.firebreath.org/display/documentation/Invoking+methods+on+the+DOM
I want make live tile like picture.How can i do this ?
The tiles created above were more then likely created server side. That being said a lot has changed between windows phone 7.1 and windows phone 8. Here is a link to the updated information on windows phone 8 live tiles.
A good starting guide is available here. What you should consider is the fact that the images you see in the Live Tile background are dynamically generated (e.g. on the server) and then returned to the phone through a pre-defined channel.
On previous versions of Windows and Windows Phone, working with Live Tiles were restricted to some predefined templates.
When you see more complex tile, you can bet that the developer generated the image programmatically and then applied it on tile background.
With Windows 10, the Adaptive Tile brings a lot of new possibilities.
...
<binding template="TileLarge" hint-textStacking="center">
<group>
<subgroup hint-weight="1"/>
<subgroup hint-weight="2">
<image src="Assets/Apps/Hipstame/hipster.jpg" hint-crop="circle"/>
</subgroup>
<subgroup hint-weight="1"/>
</group>
<text hint-style="title" hint-align="center">Hi,</text>
<text hint-style="subtitleSubtle" hint-align="center">MasterHip</text>
</binding>
...
You can find the full example here
For previous versions, you can find examples at http://talkitbr.com/2015/05/25/live-tiles/
Windows 8 metro style app tiles are created based on pre-defined xml templates (found here).
Is there any way to hook up to Windows' rendering of the tile to allow a tile preview within an app?
In my app I would like to offer the user a subset of the tile templates listed in the above link and let the user customize the tile content. A live preview of the customized tile rendered within my app would greatly improve the user experience.
you should look into HubTile.
I don't know any free control's right now, but Telerik and Syncfusion have HubTile control
You can't get access to real Windows tile rendering, but you can simulate it since all templates are known. It is very unlikely that Microsoft would change the way tiles are rendered and even if they do you should be able to issue app update to keep up with Microsoft.