Right to Left Language Support
Learn how to support right to left languages in your Appcues experiences.
You can build Appcues modals and tooltips in a right-to-left language simply by adding the below code to the CSS editor in your global styling page. Learn more about setting up flows in different languages here.
Need help with CSS? Reach out to our support team for assistance.
appcues cue, .appcues-actions, .tooltip .panel-content, .tooltip .panel-content-actions {
direction: rtl;
text-align: initial;
}
.appcues-actions .appcues-actions-left, .tooltip .panel-content-actions .appcues-actions-left {
text-align: right;
float: none;
}
.appcues-actions .appcues-actions-right, .tooltip .panel-content-actions .appcues-actions-right {
text-align: left;
float: none;
}
.tooltip .panel-content-actions .appcues-actions-right, .tooltip .panel-content-actions .appcues-actions-left {
padding-left: 5px;
padding-right: 5px;
}
appcues cue .appcues-actions-right .appcues-button[data-step=next]:after, appcues cue .step-action-buttons .appcues-actions-right .appcues-button[data-step=next]:after {
content: "◀";
left: 0;
right: initial;
border-right: 1px solid #fff;
border-left: none;
}
appcues cue .appcues-actions-left .appcues-button[data-step=prev]:before, appcues cue .step-action-buttons .appcues-actions-left .appcues-button[data-step=prev]:before {
content: "▶";
right: 0;
left: initial;
border-left: 1px solid #fff;
border-right: none;
}
appcues cue .appcues-actions-right .appcues-button[data-step=next], appcues cue .step-action-buttons .appcues-actions-right .appcues-button[data-step=next] {
padding-left: 45px;
padding-right: 18px;
}
appcues cue .appcues-actions-left .appcues-button[data-step=prev], appcues cue .step-action-buttons .appcues-actions-left .appcues-button[data-step=prev] {
padding-right: 45px;
padding-left: 18px;
}