-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-4.htm
1 lines (1 loc) · 10.4 KB
/
index-4.htm
1
<!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><title>RTLCSS</title><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.ico"><link rel="canonical" href="https://rtlcss.com/index.html"><link rel="apple-touch-icon image_src" href="/icon/apple-touch-icon-precomposed.png"><link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png"><link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png"><link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60x60.png"><link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png"><link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png"><link rel="icon" type="image/png" href="/icon/favicon-196x196.png" sizes="196x196"><link rel="icon" type="image/png" href="/icon/favicon-160x160.png" sizes="160x160"><link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16"><link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32"><meta name="msapplication-TileColor" content="#2f83cd"><meta name="msapplication-TileImage" content="/icon/mstile-144x144.png"><link href="//cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet"><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel=" stylesheet"><link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.7.1/css/alertify.min.css"><link rel="stylesheet" href="/css/vendor/alertify/theme.css"><link rel="stylesheet" href="/css/vendor/jquery.scrollbar.css"><link rel="stylesheet" href="/css/site.css"><link rel="alternate" href="/atom.xml" title="RTLCSS" type="application/atom+xml"><meta name="description" content="RTLCSS is a framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)."><meta property="og:type" content="website"><meta property="og:title" content="RTLCSS"><meta property="og:url" content="https://rtlcss.com/"><meta property="og:site_name" content="RTLCSS"><meta property="og:description" content="RTLCSS is a framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)."><meta property="og:locale" content="en_US"><meta property="og:image" content="https://rtlcss.com/icon/og.png"><meta property="article:published_time" content="2020-12-10T15:52:51.674Z"><meta property="article:modified_time" content="2020-12-10T15:52:51.674Z"><meta property="article:author" content="Mohammad Younes"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://rtlcss.com/icon/og.png"><meta name="twitter:site" content="rtlcss"><script>!function(e,a,t,n,g,c,o){e.GoogleAnalyticsObject=g,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),o=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",o.parentNode.insertBefore(c,o)}(window,document,"script",0,"ga"),ga("create","UA-80003507-1","auto"),ga("send","pageview")</script><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-5307157228276956",enable_page_level_ads:!0})</script><meta name="generator" content="Hexo 5.2.0"></head><body><header><div class="content"><a class="logo" href="/"><img width="80" height="80" src="/css/pix/logo.svg"></a><a href="#" class="bars"><i class="fa fa-2x fa-bars"></i></a><div class="menu"><ul><li class="aux"><div><iframe src="https://ghbtns.com/github-btn.html?user=MohammadYounes&repo=rtlcss&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="no" width="120" height="20"></iframe><iframe src="https://platform.twitter.com/widgets/tweet_button.1404859412.html#_=1405910492553&count=horizontal&id=twitter-widget-0&lang=en&original_referer=https://rtlcss.com&related=alertifyjs,mohammad_younes&size=m&text=CSS made right-to-left&url=https://rtlcss.com&via=rtlcss" allowtransparency="true" frameborder="0" scrolling="no" width="120" height="20"></iframe></div></li><li><a href="/">Home</a></li><li><a href="/learn">Docs</a></li><li><a href="/playground">RTLCSS Online</a></li><li><a href="/cdn">CDN</a></li></ul></div></div></header><section class="intro dark"><div class="content"><img width="80" height="80" src="/css/pix/logo.svg"><h1>RTLCSS</h1><p>Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL)</p></div></section><section><div class="content landing-block"><div style="min-height:142px;overflow:hidden"><script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIE53E&placement=rtlcsscom" id="_carbonads_js"></script></div><h2><b>Automagically </b>works!</h2><hr class="fa fa-magic"></div></section><section class="right arrow"><div class="content"><div class="column"><h2><i class="fa fa-css3"></i> CSS Level 3</h2><p>It's more than swapping left with right, RTLCSS provides <a href="/learn/getting-started/why-rtlcss/#css-level-3">Full Support</a> for CSS3 properties.</p></div><div class="column"><div class="js-css props"><span class="selector">.selector</span> <span class="brace">{</span><span class="property">background</span> <span class="brace">}</span></div></div></div></section><section class="left arrow"><div class="content"><div class="column"><h2><i class="fa fa-cogs"></i> Processing Directives</h2><p>Powerful set of <a href="learn/getting-started/why-rtlcss/#processing-directives">directives</a> to manage the conversion process right from within your CSS.</p></div><div class="column"><div class="js-css directives"><span class="comment">/*rtl:</span><span class="directive"></span><span class="comment">*/</span></div></div></div></section><section class="right arrow"><div class="content"><div class="column"><h2><i class="fa fa-map-signs"></i> String Maps</h2><p>Customize bi-directional <a href="/learn/usage-guide/string-map">string maps </a>to match your convention and easily control URL updates.</p></div><div class="column"><div class="js-css string-map"><span class="selector">.selector</span> <span class="brace">{</span><span class="property">...</span><span class="brace">}</span></div></div></div></section><section class="desktop"><div class="content"></div></section><section class="blue no-overflow"><div class="content rel"><div class="js-css stylesheet top"><div class="inner"><span class="selector">html</span> <span class="brace">{ </span><span class="property">direction:</span>ltr;<br><span class="property">font-family:</span> "Droid Sans", sans-serif<span class="comment">/*rtl:prepend:"Droid Arabic Kufi",*/</span>;<br><span class="property">font-size:</span>16px<span class="comment">/*rtl:14px*/</span>; <span class="brace">}</span></div></div><div><h1>Don't repeat yourself!</h1><p>Instead of authoring two sets of CSS files, one for each language direction. Just author the LTR version and RTLCSS will auto create the RTL counterpart for you!</p><a class="button" href="/learn"><i class="fa fa-2x fa-flash"></i> Get Started</a></div><div class="js-css stylesheet bottom"><div class="inner"><span class="selector">html</span> <span class="brace">{ </span><span class="property">direction:</span>rtl;<br><span class="property">font-family:</span>"Droid Arabic Kufi", "Droid Sans", sans-serif;<br><span class="property">font-size:</span>14px;<span class="brace"> }</span></div></div></div></section><section><div class="content"><div class="horizontal-list"><div class="item"><iframe src="https://ghbtns.com/github-btn.html?user=MohammadYounes&repo=rtlcss&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="no" width="225" height="20"></iframe></div><div class="item"><iframe src="https://ghbtns.com/github-btn.html?user=MohammadYounes&repo=rtlcss&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="no" width="225" height="20"></iframe></div><div class="item"><iframe src="https://platform.twitter.com/widgets/follow_button.1404859412.html#_=1406289087792&id=twitter-widget-1&lang=en&screen_name=rtlcss&show_count=true&show_screen_name=true&size=m" allowtransparency="true" frameborder="0" scrolling="no" width="225" height="20"></iframe></div><div class="item"><iframe src="https://platform.twitter.com/widgets/tweet_button.1404859412.html#_=1405910492553&count=horizontal&id=twitter-widget-0&lang=en&original_referer=https://rtlcss.com&related=alertifyjs,mohammad_younes&size=m&text=CSS made right-to-left&url=https://rtlcss.com&via=rtlcss" allowtransparency="true" frameborder="0" scrolling="no" width="225" height="20"></iframe></div><div></div></div></div></section><section class="dark"><div class="content"><div class="links"><a href="https://github.com/MohammadYounes/rtlcss/issues" target="_blank">Report an issue</a> | <a href="https://github.com/MohammadYounes/rtlcss" target="_blank">View on GitHub</a> | Follow Me on <a href="https://www.github.com/MohammadYounes" target="_blank"><i class="fa fa-github"></i> GitHub</a> and <a href="https://www.twitter.com/rtlcss" target="_blank"><i class="fa fa-twitter"></i> Twitter</a></div><div class="links">Created by <a href="https://www.github.com/MohammadYounes" style="color:orange" target="_blank">Mohammad Younes</a></div><div class="affiliates"><a href="http://www.isresponsive.com" target="_blank" style="margin-bottom:20px"><img src="/img/isresponsive.png"><div>www.isResponsive.com</div></a><a href="https://www.alertifyjs.com/" target="_blank" style="margin:0 10%"><img src="/img/alertifyjs.png" alt="AlertifyJS" width="115"><div>www.alertifyjs.com</div></a></div></div></section><script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script><script src="/js/site.js"></script><script src="/js/vendor/jquery-scrollLock.js"></script><script src="/js/vendor/typed.js"></script><script src="/js/landing.js"></script><script src="/js/vendor/jquery.scrollbar.js"></script></body></html>