PDF Flipbook, links, customization and tips with dFlip

PDF links, or annotations, are one of the features that make PDF interactive. You can provide a link for the readers to click and they can follow the link into further information that could not be included in the PDF itself.

dFlip support such links and make PDF Flipbooks interactive and informative.

Customizations

Change or hide the color of the links.

By default the color of the links are yellow. And are highlighted by default. While this is the default scenario, there can be cases where the link needs to match the site color scheme. In such cases, you can use custom CSS to make such changes.

/* Make the highlight color red */
section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{ 
    background-color: red !important; 
}

If the highlighted colors are an annoyance, you can totally hide them too.

/* Make the highlight transparent - no color */
section.linkAnnotation a, a.linkAnnotation, a.customLinkAnnotation, .customHtmlAnnotation, .customVideoAnnotation{
    opacity:0 !important; 
}

Optimizations

Why is PDF loading slowly?

By default, the plugin supports partial loading inbuilt. but for that, you need to make sure partial loading is not disabled. Normally, as default, partial loading is supported out of the box. But, in cases where gzip is enabled for PDF then the partial loading won’t work.

Disable gzip for PDF in .htaccess file.

<IfModule mod_headers.c>
    <FilesMatch "\.pdf$">
        RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1]
    </FilesMatch>
</IfModule>

Further Reading at StackOverFlow https://stackoverflow.com/questions/9249243/how-to-disable-apache-gzip-compression-for-some-media-files-in-htaccess-file

Make PDF file smaller, Web-Ready!

Also, make sure your PDF is Web optimized. 50MB for 10 pages is not good for web use. Optimize the PDF and make it as small as 5MB or less. Maybe this can be useful: https://www.iskysoft.com/edit-pdf/optimize-pdf-mac.html

There is a CORS (Cross-Origin) issue and PDF is not loading!

This occurs when the file and page are in HTTP and https mixed protocol. This is a result of improper https redirection. We recommend using the proper setup to redirect every HTTP request to https to avoid any conflict.

If you are using the file from another domain, make sure you have a proper CORS setup done in another domain.

For Apache Server, add following lines in .htaccess file

Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Headers "Range" 
Header set Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"

More Info: https://enable-cors.org/server.html

Note: CORS access settings may not be available for servers like Google Drive, One Drive, or other file sharing services. They do so to protect their bandwidth. These solutions are possible for servers that are owned by the customers or have access to such settings.