New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Right-to-Left Support

Title
Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon. She is reliable, and great at making complex ideas simple. Her approach ensures smooth teamwork and great results. Reach her at (555) 248-9173.

The language input for web users can be left-to-right or right-to-left. The SmartPasteButton supports both input modes enabling you to properly render a spectrum of languages, including Hebrew, Chinese, and Arabic, thus making your app a truly global one and helping your localization efforts.

The WebForms SmartPasteButton component comes with built-in right-to-left (RTL) support and offers right-to-left rendering.

This demo shows how to set the SmartPasteButton RTL functionality by wrapping the button element in a container div element with dir="rtl".

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SmartPasteButton_Accessibility_and_Internationalization_RTL_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../../SmartPasteStyles.css" rel="stylesheet" />
    <link href="../../Overview/style.css" rel="stylesheet" />
    <script src="../../Overview/script.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <div dir="rtl">
            <div class="smartpaste-container" id="smartPasteContainer">
                <telerik:RadCard runat="server">
                    <telerik:CardBodyComponent runat="server">
                        <div class="editor-column">
                            <div class="editor">
                                <div class="editor-toolbar">
                                    <div class="schematic-toolbar">
                                        <div class="button-group">
                                            <div class="skeleton-btn skeleton-btn-left"><span class="label"></span></div>
                                            <div class="skeleton-btn skeleton-btn-right"><span class="label"></span></div>
                                        </div>
                                        <div class="commands">
                                            <div class="split-button">
                                                <div class="skeleton-btn skeleton-btn-split-main"><span class="label wide"></span></div>
                                                <div class="skeleton-btn skeleton-btn-split-arrow">
                                                    <svg width="12" height="8" viewBox="0 0 12 8">
                                                        <path fill="#ffffff" d="M6 8L0 0h12L6 8z"></path>
                                                    </svg>
                                                </div>
                                            </div>
                                            <div class="skeleton-btn skeleton-btn-icon">
                                                <svg width="4" height="16" viewBox="0 0 4 16">
                                                    <circle cx="2" cy="2" r="2" fill="#ffffff"></circle>
                                                    <circle cx="2" cy="8" r="2" fill="#ffffff"></circle>
                                                    <circle cx="2" cy="14" r="2" fill="#ffffff"></circle>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="editor-text-area">
                                    <div class="content">
                                        <div class="editor-body">
                                            <div class="editor-body-title">Title</div>
                                            <div class="editor-body-text" id="editorContent">
                                                Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon.
                                                She is reliable, and great at making complex ideas simple.
                                                Her approach ensures smooth teamwork and great results.
                                                Reach her at (555) 248-9173.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="editor-actions">
                                <telerik:RadButton runat="server" ID="CopyButton1" Text="Copy Text" AutoPostBack="false" OnClientClicked="onCopyClick" />
                            </div>
                        </div>
                    </telerik:CardBodyComponent>
                </telerik:RadCard>
                <telerik:RadCard runat="server">
                    <telerik:CardBodyComponent runat="server">
                        <div class="form-wrapper">
                            <div class="control-container">
                                <label for="RadtextBox1">Full Name</label>
                                <telerik:RadTextBox runat="server" ID="RadtextBox1" EmptyMessage="Full Name" Width="250" SmartPasteDescription="Name" />
                            </div>
                            <div class="control-container">
                                <label for="RadtextBox1">City</label>
                                <telerik:RadTextBox runat="server" ID="TextBox2" EmptyMessage="City" Width="250" SmartPasteDescription="City" />
                            </div>
                            <div class="control-container">
                                <label for="RadtextBox1">Phone Number</label>
                                <telerik:RadMaskedTextBox runat="server" ID="RadNumericTextBox1" Width="250" Mask="(###) ###-####" SmartPasteDescription="Phone Number must be only digits eg. 5552489173 and must be of type Number" />
                            </div>
                            <div class="buttonDiv">
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" AutoPostBack="false" ToolTip="Clear Selction" OnClientClicked="onClearClick">
                                    <Icon PrimaryIconCssClass="rbCancel"></Icon>
                                </telerik:RadButton>
                                <telerik:RadSmartPasteButton runat="server" ID="SmartPasteButton1" Text="Smart Paste" ServiceUrl="https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste">
                                    <ClientEvents OnRequestStart="onRequestStart" />
                                </telerik:RadSmartPasteButton>
                            </div>
                        </div>
                    </telerik:CardBodyComponent>
                </telerik:RadCard>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance