Questions in Hindi language are cropped from top

Submitted by vinodrenu on Wed, 07/10/2019 - 04:44
Forums: 
Bugs in content types

The Hindi language characters go above the line in comparison to English. This leads to questions in Hindi language being cropped a little bit from top. If a question in "Question Set" has an image then text will appear fine but question without image will be cropped. Though English translation of same Hindi content displays fine.

A minor tweak to the CSS as mentioned below displays them well.

Original CSS and output

.h5p-question > *:first-child { margin-top: 0; }

  Updated CSS and susequent output

.h5p-question > *:first-child { margin-top: 2px; }

Making this change in H5P css library will fix this problem more elegantly than creating a custom plugin as advised here - https://h5p.org/documentation/for-developers/visual-changes

Here is the information about environment and live URLs where this problem is observed.

Attachments: 
Image icon Before.png
Image icon After.png
Summary: 
CSS update to display questions properly in Hindi language
BV52's picture

BV52

Wed, 07/10/2019 - 08:26

Hi vinodrenu,

Thank you for reporting this and providing the suggestions on how to resolve it. However I would need additional information since I am unable to reproduce the issue you described above. please include the following information:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen)
  2. Platform and version number. E.g. Drupal, Wordpress, Moodle.
  3. Mobile or Desktop
  4. Browser: Chrome, Firefox, Safari etc
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.

If this worked before please provide the information below:

  1. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.)
  2. Any recent changes to the browser you're using (new extensions, updates etc.)

The more information you provide, the quicker the community will be able to fix it and the quicker you'll have a working solution!

-BV52

vinodrenu

Wed, 07/10/2019 - 20:07

Hi BV52,

I have added more information along with live URLs to the bug report.

Regards,Vinod
icc's picture

icc

Thu, 07/11/2019 - 10:01

Hi Vinod, 
Thank you for pointing this out. I was not aware of this issue.
I believe the main source of this issue is CSS's line-height property. If you change this to a number smaller than 1.5 the issue is present unless the element has some extra margin/padding. Using the value called 'normal' appears to be the way to fix this. Until we get this fixed you can include this custom CSS rule to fix the issue:

.h5p-question .h5p-question-introduction {
  line-height: normal
}

 

vinodrenu

Thu, 07/11/2019 - 23:31

Hi ICC,

I added this in Drupal theme CSS and that does not make any difference.

Does this suggestion needs to be implemented as documented here - https://h5p.org/documentation/for-developers/visual-changes ?

Regards,Vinod