1. Home
  2. Development
  3. RE: Problem with Right to Left styles in liferay 7.1

RE: Problem with Right to Left styles in liferay 7.1

thumbnail
Nader Jafari, modified 6 Years ago.
Problem with Right to Left styles in liferay 7.1
Junior Member Posts: 84 Join Date: 8/24/11 Recent Posts
Hi
I am developing a theme for liferay 7.1 , my problem is that all css styles converted automatically by RTLServlet and i does not able to write any css styles under rtl class to change styles only in Right To Left languages and fix some problems ...

for example if write :
.rtl{
    code, kbd, pre, samp {
        text-align: left;
    }
}

Liferay portal converted to :
[color=#000000][font="Courier New"][size=9pt].rtl{
    code, kbd, pre, samp {
        text-align: right;
    }
}
[/size][/font][/color]
how to avoid this automatically coanvert by liferay?

Also i read this article : https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/supporting-right-to-left-languages-in-plugins but does not work in themse and only works in theme contributers ...
anyone can help me?
thank you
Patrick Yeo, modified 6 Years ago.
RE: Problem with Right to Left styles in liferay 7.1
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
Can you do?


.rtl{
    code, kbd, pre, samp {
        text-align: right;
    }
}


When it goes through the conversion it will output:


.rtl{
    code, kbd, pre, samp {
        text-align: left;
    }
}
thumbnail
Nader Jafari, modified 6 Years ago.
RE: Problem with Right to Left styles in liferay 7.1
Junior Member Posts: 84 Join Date: 8/24/11 Recent Posts
Thank you Patrick.
i resolved this issue by adding bellow lines in gulpfile.js because in lifery theme builder exist a task named build:r2 that converted all css files to _rtl.css :


 * SPDX-License-Identifier: MIT
 */

'use strict';

var gulp = require('gulp');
var gulpif = require('gulp-if');
var log = require('fancy-log');
const debug = require('gulp-debug');
var gulpmatch = require('gulp-match');
var map = require('map-stream');


var liferayThemeTasks = require('liferay-theme-tasks');
const lfrThemeConfig = require('liferay-theme-tasks/lib/liferay_theme_config');
const themeUtil = require('liferay-theme-tasks/lib/util');
const path = require('path');
const _ = require('lodash');
const {createBourbonFile} = require('liferay-theme-tasks/lib/bourbon_dependencies');

liferayThemeTasks.registerTasks({
    gulp,
});

liferayThemeTasks.registerTasks({
    gulp: gulp,
    hookFn: function(gulp,options) {
        const {pathBuild} = options;
        gulp.task('build:r2', function(done) {
            const r2 = require('gulp-liferay-r2-css');
            const plugins = require('gulp-load-plugins')();
            const fs = require('fs');

            return gulp
                .src([pathBuild + '/css/*.css','!'+pathBuild+'/css/*_rtl.css'])
                .pipe(plugins.rename({
                    suffix: '_rtl',
                }))
                .pipe(r2())
                .pipe(map(function (file, cb) {
                    fs.stat(file.path, function(err, data) {
                        if (!err) {
                            var content = fs.readFileSync(file.path, 'utf8');
                            file.contents = Buffer.from(file.contents.toString('utf8').concat(content));
                        }
                    });
                    cb(null, file);
                }))
                .pipe(gulp.dest(pathBuild + '/css'));
        });

    }
});
we overwrite build:r2 task and now when i add main_rtl.scss in css folder this include at end of main_rtl.css .
in main_rtl.scss we can overwrite any css rules this rules does not converted by r2 emoticon
also we will open an issue in https://github.com/liferay/liferay-js-themes-toolkit and commit this change to improve support Right to left languages.