Setting different font for Visual editor in RTL mode

  • Christine Rondeau

    (@crondeau)


    11 years, 5 months ago

    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?

Viewing 7 replies - 1 through 7 (of 7 total)
  • mohdrafie

    (@mohdrafie)

    11 years, 5 months ago

    Have you tried !important?

    * {
	font-family: Arial, Helvetica, sans-serif !important;
}
    Emil Uzelac

    (@emiluzelac)

    11 years, 5 months 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

    Thread Starter Christine Rondeau

    (@crondeau)

    11 years, 5 months ago

    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.

    mohdrafie

    (@mohdrafie)

    11 years, 5 months 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.

    Thread Starter Christine Rondeau

    (@crondeau)

    11 years, 5 months ago

    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

    J

    (@jamalorg)

    11 years, 5 months 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.

    djsmith_1998@yahoo.com

    (@djsmith_1998yahoocom)

    11 years, 1 month 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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Setting different font for Visual editor in RTL mode’ is closed to new replies.