Help creating sharp text in a non-responsive project

Community Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Hi there!  I am creating a project which is for desktop only so no need to be responsive.  However, the problem I have is that with a non-responsive project, the text seems to be very pixelated as i believe it is converted into an image?  Apart from creating the text in illustrator and importing in as a SVG is there any other way to sharpen the text?  Obviously importing the text as an SVGs will be a slow process and difficult to update.  Would you recommend creating this as a responsive project even though it will not be required as such, to improve the qulaity overall? I also have been tasked to update older non-responsive projects and improve the quality. The dimensions are 1280x720. 

Thanks!  

Views

99

Likes

translate

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 Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Ps. The text is pixelated after I have peviewed as HTML5 in Browser window. 

 

Likes

translate

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
Most Valuable Participant ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

To force rendering the text on runtime, use the 'dynamic' text trick: insert a user variable (its value empty) in each text container. 

Likes

translate

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 Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Hi! many thanks for the workaround.  Is there any way to avoid the $ icons at the end of the text as tends to move formatting around? although I have noticed this does not effect it once previewed. Just really messy on the screen and will freak out the SMEs when they see it haha!. I hope Captivate will make this a lot simpler to create sharp text without any formatting problems for non-responsive projects soon!  

Likes

translate

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 Beginner ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

I have noticed the text is no longer centre aligned and moves down a few pixels! 😞 

Likes

translate

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
Most Valuable Participant ,
Apr 01, 2021 Apr 01, 2021

Copy link to clipboard

Copied

Hmmm... you never used a variable so far? The $$ are only marking this as a placeholder. Do you want to hide it for the SME? Change it color to the color of the background.

Where did you put the variable? If it is at the end, it will not mess up formatting. At least I never did see that. Check the object style of the text container, please: not only alignment but also the padding. And check the output with Preview HTML in Browser. Contrary to SWF output the WYSIWYG for HTML is never perfect due to the fact that all browsers have a native interpretation of HTML5.

Likes

translate

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
Adobe Community Professional ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

My solution for this is to increase the size of my project dimensions to something in or around the HD quality range like 1470 x 900 or even right up to 1764 x 1080. Make sure when you publish you do so with HTML scaling turned on so that the project scales down for smaller screen devices like tablets or smaller laptops. It's like switching from Grandma's old TV from the 80s to a brand new HD model.

Paul Wilson, CTDP

Likes

translate

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