Forum Discussion

FabianVazquez's avatar
FabianVazquez
Community Member
3 years ago

Embedded PDF is blurry / El PDF incrustado está borroso

Greetings and good afternoon, when embedding a PDF document through the web object, the document in the published project looks blurry or of low quality. But when viewing the embedded web page separately, it is observed that there are no quality problems and it is displayed correctly.

How is it possible to improve the quality when viewing the embedded object?

---

Saludos y muy buena tarde, al incrustar un documento PDF por medio del objeto web, el documento en el proyecto publicado se ve borroso o de baja calidad. Pero al momento de ver la página web incrustada por separado se observa que no hay problemas de calidad y se despliega correctamente.

¿Cómo es posible mejorar la calidad al visualizar el objeto incrustado?

---------------------------------------------
The code of the web page is as follows.
---
El código de la pagina web es el siguiente.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style>
body { position: absolute; top: 0;
bottom: 0; width: 100%; height: 100%; margin: 0;}
</style>
</head>
<body>
<object data="pdf.pdf" frameborder="0" width="100%" height="100%"></object>
</body>
</html>

  • Hello Fabian, 

    Would you be willing to upload a copy of your project file here so we can take a look at the web object? We'll delete your file as soon as we're done testing it. You can also open a case with our support team and share your file that way.

  • Hi Fabian, 

    Thanks for sharing your project file! It looks like you had your PDF file saved somewhere on your desktop instead of on a file server. Note that when you publish your course and upload it to either a web server or LMS, your course will not be able to locate your PDF file because it is saved in a directory that cannot be reached over the web. 

    Regarding the blurriness of the embedded PDF, we are currently tracking a known issue where web objects with image files appear blurry in the published output. I've added this post to the bug report so we can notify you as soon as a fix is released. We apologize for any inconvenience this may have caused. 

  • FabianVazquez's avatar
    FabianVazquez
    Community Member

    Thanks for the prompt response, I have verified that both web objects hosted on a web server and those embedded have the same problem they are blurry, thanks for considering correcting this problem since it is a resource that we usually use in the vast majority of the courses that We do, without more I remain attentive.

    Gracias por la pronta respuesta, he comprobado que tanto los objetos web alojados en un servidor web como los incrustados presentan el mismo inconveniente están borrosos , gracias por poner a consideración corregir dicho problema ya que es un recurso que solemos utilizar en la gran mayoría de los cursos que realizamos, sin mas quedo atento.

     

  • the reason for the blur problem is that the current browsers have problems with the css command 'transform: scale()' for some iframes.

    here is a screenshot - the way storyline displays the page

     

     

    here are the css properties

     

     

    but if you do the scaling not with scale but with width + height it looks like this

    width:  700px * 1.55
    heigth: 520px * 1.55
    transform: ---


    here again the css-properties

    => much better !!!

    -> Attachment the original png screenshots

    so articulate had to change there scaling function for embeded iframe to solve the problem

    Jürgen

     

  • FabianVazquez's avatar
    FabianVazquez
    Community Member

    Jürgen thank you very much for locating the problem, now it is as an end user I see two options.

    1.- The articulate development team add an option to enable or disable scaling to the embedded web object options

    2..- Add a java script function in the slide to remove the scale attribute from the webobject class and scale the content.

    Jürgen muchas gracias por localizar el inconveniente, ahora es como usuario final veo dos opciones.

    1.- Que El equipo de desarrollo de articúlate agregue a las opciones de objeto web insertado una opción para habilitar o deshabilitar el escalado.

    2..- Agregar una función java script para quitar el atributo de escala a la clase webobject y escalar el contenido.

    document.querySelector(".webobject").style.transform = "";
    document.querySelector(".webobject").style.width = "100%";
    document.querySelector(".webobject").style.height = "100%";

  • Hello Everyone!

    I'm happy to share that we have released Storyline 360 version 78 (Build 3.78.30680.0)!

    Included in this release is the fix for the bug: HTML5: Web Objects With Images Are Blurry.

    Now all you need to do is update Storyline 360 in your Articulate 360 desktop app on your computer. You'll find our step-by-step instructions here.

    Please let us know if you have any questions by reaching out to our Support Engineers directly.

    Have a great day!

  • Steven,

    I have updated to the latest version of Storyline but the PDF rendered in the web object is still blurry. Is further work being done on this issue?

    Thanks!

    • Jürgen_Schoene_'s avatar
      Jürgen_Schoene_
      Community Member

      you have to deselect "Scale with slide"

      "Scale with slide" selected

      "Scale with slide" deselected