Barcode get skewed when user zooms in our out

[rskaarup]

I have a rectangular datamatrix code, that gets unreadable if the user has zoomed in our out on the webpage. Problem is easily repeatable in Safari, Chrome and Firefox.

[AlphaOneWhiskeyFour]

Thank you for your report - I need some more details, can you show me snippets of code?

[rskaarup]

Here you go: <div id="barcodeContainer" style="position: relative;"> <div id="barCode"></div> </div> <script type="text/javascript”> $("#barCode").barcode({code: “1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234", rect:true}, "datamatrix",{barWidth:1, barHeight:20, showHRI:false}); </script> When zooming in once in Safari, the code skews. When zooming in again, it looks correct. And so forth. Br Rasmus Skaarup

…

On 18 Mar 2018, at 14.26, xxalfa ***@***.***> wrote: Thank you for your report - I need some more details, can you show me snippets of code? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AiQJZnGEOHEH2EwXPJXuI5m2CDcnCgn3ks5tfmB0gaJpZM4SvGSe>.

[AlphaOneWhiskeyFour]

Zooming through the browser is not recommended - I would rather use the parameter moduleSize.

<script type="text/javascript">

    $( 'barCode' ).barcode( { code: '1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234', rect: true }, 'datamatrix', { moduleSize: 10, showHRI: false } );

</script>

<input type="range" min="5" max="10" step="1">

[AlphaOneWhiskeyFour]

Could I provide enough help with my answer? Does the implementation work with the module size?

[rskaarup]

The size of the barcode suits me fine, so I don’t want it to change. But if the user wants to zoom (in his own browser) to increase text size - the barcode gets unreadable. Br Rasmus

…

On 20 Mar 2018, at 00.21, xxalfa ***@***.***> wrote: Could I provide enough help with my answer? Does the implementation work with the module size? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AiQJZsFUSNfqDeGzJkO_gWTeRuA7FjhFks5tgD14gaJpZM4SvGSe>.

[AlphaOneWhiskeyFour]

Then I do not understand why you have reported the problem, if you will not improve your service?

[rskaarup]

You say “zooming though browser is not recommended”, but I really can’t help it if users want the text size to increase in their browser. The barcode becomes unreadable if they do, so your solution is less than optimal. For me it will be fine if the text size increases, but the barcode doesn’t. Or at least the barcode doesn’t become corrupted when they zoom. But if that is not possible, the only solution is to go for, is a barcode as an image. Br Rasmus

…

On 20 Mar 2018, at 22.13, xxalfa ***@***.***> wrote: Then I do not understand why you have reported the problem, if you will not improve your service? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AiQJZpSdkyYFRqAQghPU3FfA6goLVpJqks5tgXDtgaJpZM4SvGSe>.

[AlphaOneWhiskeyFour]

I see it differently, you can create a button or slider, which can be resized so that the user no longer has to resort to the browser zoom feature.

[rskaarup]

I’m still not quite sure you are following me. I am not interested in providing a zoom feature. However, some people do use the zoom feature in their browser - for many sites - mostly because they want the text bigger, so they dont need to put on their glasses to read whats on the screen (or whatever). But if they do, it makes the barcode corrupt and unreadable by a scanner. The barcode doesnt have to change if they zoom, but it does. Try it! Its clearly visible that the barcode gets corrupt if you zoom in or out. If zooming is not allowed or supported by your software, then men over 40-ish cant be the end-user of it. Br Rasmus

…

Den 26. mar. 2018 kl. 00.56 skrev xxalfa ***@***.***>: I see it differently, you can create a button or slider, which can be resized so that the user no longer has to resort to the browser zoom feature. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[AlphaOneWhiskeyFour]

The fact that the barcode is destroyed depends on how it is generated, in this case with CSS - each pixel is a small HTML block. We would have to build the generation completely different.

[adrienv1520]

Hi,

The issue isn't coming from Barcode algorithms but browser antialiasing.

I fixed this issue for both CSS and SVG rendering. You can find the details in the pull request:
#28

Hope it helps you guys ;)