Right to left

Hi everyone,
I was wondering if it is possible to write from right to left to support Hebrew..

I am have a hard time figuring it out... thanks in advance for all your support..

falcon's picture


There isn't any libraries on H5P.org that supports it. Hopefully someone in the community will provide patches, funding or libraries that support it in the future

I'm using H5P with content that is also translated into Hebrew, and I've been able to get things working pretty well (mostly multiple-choice and fill-in-the-blank questions) so far with these CSS fixes placed into the RTL style sheet for my site:


.joubel-speech-bubble-inner { text-align: right; }

.h5p-blanks .h5p-wrong::after, .h5p-blanks .h5p-correct::after { left: 0.5em; right:inherit; }

.h5p-multichoice > .h5p-question { text-align: right; }

.h5p-multichoice label { text-align: right; }

.h5p-multichoice .h5p-input-container { float: right; }

.h5p-multichoice .h5p-input { right: -1000px; left:inherit; }

.h5p-multichoice .h5p-feedback-text { text-align:right; }

.h5p-multichoice .h5p-answer .h5p-feedback-inner { text-align: right; }

.h5p-multichoice .joubel-tip-container { left:0; right:inherit; }

.joubel-speech-bubble { left:1em; right:inherit; min-width: 10em; }

.joubel-speech-bubble-inner::before, .joubel-speech-bubble::before { left:10px; right:inherit; }

.h5p-multichoice .h5p-answer > label::before { left:0.75em; right:inherit; }

.popover-title, .popover-content { text-align:right; }

.h5p-blanks button.h5p-button::after { font-family: 'H5PFontAwesome4'; content: "\f06e"; padding-right: 0.5em; }

.h5p-blanks button.h5p-button.h5p-check-answer::after { content:"\f058"; }

.h5p-blanks button.h5p-button.h5p-try-again::after { content:"\f021"; }

.h5p-blanks button.h5p-button::before, .h5p-blanks button.h5p-button.h5p-check-answer::before, .h5p-blanks button.h5p-button.h5p-try-again::before { content:""; }

.h5p-multichoice .h5p-show-solution-container .h5p-multichoice-check-button::after { content: "\f058"; font-family: 'H5PFontAwesome4'; padding-right: 0.5em; }

.h5p-multichoice .h5p-show-solution-container .h5p-multichoice-check-button::before { content:""; }


falcon's picture

Thanks a lot for sharing spazfox!
Or Daniel's picture


Hi @some css,

Thank you for sharing this code, whitch file I must add this css code in wordpress plugin?

alaamoh's picture

thank you can you give more info about that 

than you

i am really need it

nadavkav's picture


i'm using h5p in wordpress, how to add rtl in wordpress?

some files dosen't exist in wordpress h5p plugin like locallib.php, hvp.php and setting.


Hi all;

Thank you for sharing your solution.

Could I ask you please how to adapt or implement this solution in WordPress? 

Where should I copy paste this code? 

Best regards.


for making contents RTL, just do following steps:

1. go to file with this address in your control panel:

2. in that file, find "html.h5p-iframe .h5p-content" class.

3. paste the following code and save the file:
direction: rtl;

4. Enjoy RTL :D

Now it is working. 

May be you can suggest me where to change it for the Timeline widget, it doesn"t work for it.