WordPress.org

Ready to get started?Download WordPress

Forums

Setting different font for Visual editor in RTL mode (8 posts)

  1. I've added RTL support to my theme and now wanted to also create an editor-style-rtl.css.
    I already have an rtl.css file which has all the changes to style the editor so that users have a great visual of what the post will look like in the visual editor.

    My theme base font is set to Georgia. In my editor-style-rtl.css I've set the following:

    html .mceContentBody {
    	direction: rtl;
    	unicode-bidi: embed;
    }
    * {
    	font-family: Arial, Helvetica, sans-serif;
    }

    I've tried adding the font-family to body, to html, to *, to everything, I can not get the editor to display the font in Arial. I've read that it's important to use sans-serif fonts for RTL languages and thus wanted to get the visual editor to display arial, but I can't get it to work.

    I went on the WordPress.com as well and tried a few themes that have Serif fonts, changed my language to Farsi and the visual editor doesn't change the font-family. Perhaps this is not possible to do? Have anyone had any success?

  2. Mohd Rafie
    Member
    Posted 1 year ago #

    Have you tried !important?

    * {
    	font-family: Arial, Helvetica, sans-serif !important;
    }
  3. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    What I would like to recommend is to use body instead of * or html in both stylesheets editor-style.css and editor-style-rtl.css

    Thanks,
    Emil

  4. I haven't been able to get this to work. Having said that, Twenty Eleven has a editor-style.css which has fonts set to : "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;

    The editor-style-rtl.css is set to arial, and I can't see the changes either. Perhaps the RTL tester is simply not sophisticated.

    Unfortunately I haven't been able to find someone with a Farsi, Hebrew or other RTL language to do some real testing, so I'll have to release and hope for the best.

  5. Mohd Rafie
    Member
    Posted 1 year ago #

    If you really need to test it, my sister uses (write, speak, write) Arabic. If you can setup the site, I can ask her to login and test and let you know.

    Wasn't sure if this will be against the forum, but if for the sake of helping the community, then I'm in.

  6. Hi Mohd,
    Thanks for your offer to help. I went ahead and updated my theme.
    http://wordpress.org/extend/themes/mon-cahier
    If you want to go ahead and ask your wife to test it for me that would be great.
    I hope I did it correct and that it will work well for Arabic speakers.

    Cheers

  7. Jamàl
    Member
    Posted 1 year ago #

    What happens if you edit the file editor-style-rtl.css and set the font there? It seems that another stylesheet is overriding the font family in your theme's editor-style.css.

  8. djsmith_1998@yahoo.com
    Member
    Posted 1 year ago #

    I am wanting to learn how to customize my tiny editor and perhaps this rtl.css is a good first step. I already know about editor-style.css and the changes it made in versions 3+ (I'm using v. 3.5). Can someone give me a quick rundown on rtl.css please? or point to docs on-line? Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic