• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

How do I fix blurry text when publishing project as HTML5 for an LMS? (see images below?)

New Here ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

blurry_text.JPGblurry_Text_2.JPG

Views

68

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

Non-responsive project?  In that case text is not rendered on runtime but converted to images. That means that rescaling can lead to blurriness. You can insert an empty variable in each text, to get dynamic text which will be rendered on runtime, same as the system variables in a score slide.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

Hi @Lilybiri ! I was just viewing your Fonts in Captivate blog post and am testing the v_null variable right now. 

 

To avoid this issue in future projects, should I always develop as Responsive? The organization I design for uploads HTML5 projects to an LMS. All empoyees use laptops, therefore I've never had a reason to develop a repsosive project. However, to avoid the fuzzy text problem, I might begin working solely in repsonsive projects. 

Thanks! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 05, 2021 Nov 05, 2021

Copy link to clipboard

Copied

Just know that a responsive project needs a lot more time to develop. Compared with inserting those null variables which is much easier. Especially if you still have to learn how to develop responsive projects.
Using Fluid Boxes with some ease took me several months notwithstanding my long experience with Captivate.

Their use can be frustrating due to the many limitations: no stacking of objects, no click boxes, nor highlight boxes allowed, you cannot use the main master slide, you cannot time objects for the rest of the projects, no slide videos, no interactive videos allowed in fluid boxes etc...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 06, 2021 Nov 06, 2021

Copy link to clipboard

Copied

LATEST

Besides the null variable idea, the other solution is to publish with a larger-sized slide and turn on HTML Scaling when you publish. Your text that is converted to images will become larger and will impact your published project size. However, it saves you from having to adjust all your text objects in your project. Lately, I have been developing projects at a resolution of 1470 x 900 instead of 1024 x 627. If you think of the second number as the equivalent to TV resolutions, 900 is much closer to HD quality, and the 627 is much closer to old standard definition TV quality. Anyway, the results will speak for themselves. When you select HTML Scaling when you publish, the project will scale down for smaller browser sizes, so the increase in resolution should have minimal impact on your users (except for the improved quality of text and images).

Paul Wilson, CTDP

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines