can't covert css to rtl using javascript library

Question

I am beginner in JavaScript and I am trying to use rtlcss library to conver css files from ltr to rtl. I am using this code but it displays 2 errors:

Uncaught SyntaxError: Illegal return statement
Uncaught ReferenceError: require is not defined

My code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/rtlcss/src/rtlcss.js"></script>
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
        (function myfunction() {
            rtlcss = require('rtlcss');
            var output = rtlcss.process('css/main.css');
            console.log(output);
            $("#result_textarea").val(output);
        })();
    </script>
</body>
</html>

I believe i am doing something wrong, it's not library problem.. so anyone can help?

Well nor did I really, but I don't think you can use `require`- This is because require() does not exist in the browser/client-side JavaScript. from link: http://stackoverflow.com/questions/19059580/client-on-node-uncaught-referenceerror-require-is-not-defined — haakym, Dec 23 '14 at 09:10
I only briefly looked over the library but I don't think you use it on the client side — haakym, Dec 23 '14 at 09:14
Take a look at Node JS, you should be using NPM (node package manager) to install RTLCSS. I think the library converts the file rather than doing it on the fly in the browser. — haakym, Dec 23 '14 at 09:18

score 1 · Answer 1 · answered Feb 04 '15 at 11:00

This is a node package, as @haakym mentioned, you should be using NPM (node package manager). For more details on how to install and use NPM, follow the Getting Started guide.

If you want to use it in the browser, you can use Browserify; it lets you require('modules') in the browser by bundling up all of your dependencies.

After you have node/npm setup complete, do the following:

From the command line, run these commands to install RTLCSS and Browserify
```
npm install rtlcss
npm install -g browserify    
```
Create a file with the following contents and save it as main.js :
```
rtlcss = require('rtlcss');
```
Run this command to create a browser usable bundle:
```
browserify main.js -o bundle.js
```
Include the resulting script in your page:
```
<script src="bundle.js"></script>
```

That's all, Now you'll be able to use it in the browser:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>convert css to rtl</title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="bundle.js"></script>   
</head>
<body>
    <textarea id="source_textarea" placeholder="place your css" ></textarea>
    <button id="convert_btn">Convert</button>
    <textarea id="result_textarea"></textarea>
    <script>
    $('button').click(function(){
      var output = rtlcss.process($('#source_textarea').val());
      $("#result_textarea").val(output);
    });
    </script>
</body>
</html>

Online Demo

can't covert css to rtl using javascript library

1 Answers1