Add RTL support#2890
Merged
corinagum merged 49 commits intomicrosoft:masterfrom Feb 14, 2020
Merged
Conversation
corinagum
commented
Feb 7, 2020
corinagum
commented
Feb 7, 2020
corinagum
commented
Feb 7, 2020
corinagum
commented
Feb 7, 2020
Contributor
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({ token }),
locale: 'ar-EG'
},
document.getElementById('webchat')
);
|
Contributor
Author
|
@compulim thanks, got it fixed :) |
compulim
approved these changes
Feb 14, 2020
| const directLine = useMemo(() => createDirectLine({ token }), []); | ||
| const store = useMemo( | ||
| () => | ||
| createStore({}, () => next => action => { |
Contributor
There was a problem hiding this comment.
Maybe improve this one using a button bar + onhashchange later.
| const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' }); | ||
| const { token } = await res.json(); | ||
|
|
||
| window.WebChat.renderWebChat( |
Contributor
There was a problem hiding this comment.
We could use a button bar + onhashchange later.
Co-Authored-By: William Wong <[email protected]>
Co-Authored-By: William Wong <[email protected]>
Member
|
whoo hoo! |
Contributor
|
WOW Thanks @corinagum! cant wait to try it |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #1976
Fixes #2902
Changelog Entry
Description
Implement the ability to display languages (such as Arabic, Urdu, etc) in Right-to-Left UI.
What is Right to Left, Left to Right, and Bidirectional Support?
(*) 'Mirror' in this article is not meant literally. In UI rules of BiDi, not every aspect or component will be mirrored, and the rules dictating those decisions will be discussed below.
Why do we want Web Chat to support this?
ar-ARhe-ILar-JOar-EGPros
Cons
Adaptive Cards and react-filmvideoandaudiohave RTL support, Web Chat's RTL experience will not be fully functionalHowever, I believe that Web Chat having RTL support will encourage the Adaptive Cards team to also implement the featureWeb Chat dependencies that need RTL Support:
<video>and<audio>(not currently supported)Steps for implementing bi-directional support
Order of detection for script direction:
dir: auto(default)) to:ltrorrtlinrenderWebChatpropsImplementation steps as they apply to Web Chat
root container'sBasic Transcript and Basic Sendbox dir attribute depending on what was detected in 'Order of detection for script direction'a. Icons showing direction need to be flipped
b. Icons that show 'right hand use' do not need to be flipped
useDirectiondocumentation toHOOKS.mdIcons/animations that need to be mirrored
dirprop and/or automatic direction detection (See dependencies section above)Spinner animation- I believe that spinners, going clockwise, are meant to represent the passage of time, and therefore should NOT be mirrored. Anecdotal and completely non-scientific information would point to a spinner remaining clockwise in RTL UI. No official-looking sources found on this topicSound slider SHOULD be mirrored - Audio / Videosee dependencies aboveMedia CONTROLS SHOULD NOT be mirroredHTML5 does not support rtl for<video>or<audio>see dependencies aboveSituations to test
HTML Videos- should be rendered by browser, but sound bar should be flippedAudio- should be rendered by browser, but sound bar should be flippedYouTube & vimeo- test that layout is correctreact-filmTests added to Mock Bot (still waiting on Arabic strings)
Mock Bot
Offline Mock Bot
[ ]File attachmentKnown internal issues
<div>which created erroneous scrollbar in RTL modeWeb features we will not use / Non-universal browser support
text-align: 'start/end' - Not supported in Edge (or Internet Explorer)match-parentis only supported by Chrome and Firefox<bdo>Documentation / Guidance / Data
https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/
https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/
https://material.io/design/usability/bidirectionality.html#mirroring-layout
https://www.ethnologue.com/guides/ethnologue200
Tests TBD
RTL sample added