NReco imagegenerator doesn't write barcodes correctly

Question

I'm trying to convert HTML code to JPEG image. It kinda work, but it doesn't when I try to do it with barcodes.

Server side, I'm using :

I'm encoding an EAN133 barcode with CODE128 protocol, it works when I want to show it on a web page (I use HttpUtility.HtmlEncode(code_barre) so the barcode is well interpreted), then I'm using a barcode font to display the barcode, and that's where something is wrong with my image :

As you can see, it's a barcode "plain text" in the good format, and with the following CSS:

@font-face { font-family: 'code_128regular'; src: url('/Assets/Fonts/code128-webfont.eot'); src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg'); font-weight: normal; font-style: normal;} .test{font-family:'code_128regular'; font-size:70px;}

I should become this :

But it doesn't, even if I import Bootstrap CSS with relative path, whereas it works when I try to generate a PDF with IronPDF

thanks for attention

EDIT : here's the HTML generated :

<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel='stylesheet' type='text/css' href='Assets/Bootstrap/css/bootstrap.min.css'>
    <script type='text/javascript' src='Assets/Bootstrap/js/bootstrap.min.js'></script>
</head>
<style>
    @font-face {
        font-family: 'code_128regular';
        src: url('/Assets/Fonts/code128-webfont.eot');
        src: url('/Assets/Fonts/code128-webfont.eot?#iefix') format('embedded-opentype'), url('/Assets/Fonts/code128-webfont.woff2') format('woff2'), url('code128-webfont.woff') format('woff'), url('/Assets/Fonts/code128-webfont.ttf') format('truetype'), url('/Assets/Fonts/code128-webfont.svg#code_128regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .test {
        font-family: 'code_128regular';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>

I will edit to show you, but it's a little bit difficult to read because it's generated server-side — alexay68, Oct 24 '17 at 13:15
Your code works when I tried it. Can you check if the extenstions `.eot`, `.woff` and `.woff2` are allowed mime types in IIS? If not the files won't be served tot the browser and you will see a 404. — VDWWD, Oct 24 '17 at 13:35
`start > run > inetmgr.exe`, go to your website in `sites` and find `MIME-types`, they should be listed there in order to work. — VDWWD, Oct 24 '17 at 13:50
ok, thank you, I will try it next time we will deploy the project :) — alexay68, Oct 24 '17 at 13:58

score 1 · Accepted Answer · answered Oct 24 '17 at 13:41

1

NReco ImageGenerator internally uses wkhtmltoimage command line tool so actually you can expect the same behavior. In your case it seems your custom font is ignored by wkhtmltoimage for some reason; first of all try to use woff, woff2 or ttf font files instead of eot. If you use "GenerateImage" method which accepts HTML as .NET string all external references should be absolute.

The following HTML template works fine for me (I've used "Libre Barcode 128" from google fonts):

<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128&amp;lang=en" />  
</head>
<style>
    .test {
        font-family: 'Libre Barcode 128';
        font-size: 70px;
    }
</style>
<center><p class='test'>&#204;MXCUTGRIP305-07D&#206;</p><p>MXCUTGRIP305-07</p></center>
</html>

answered Oct 24 '17 at 13:41

Vitaliy Fedorchenko

8,447
3
37
34

That's not exactly what I wanted because it use an external ressource, but it works, so I mark it as a solution – alexay68 Oct 24 '17 at 13:57
@alexay68 just open google fonts url ( https://fonts.googleapis.com/css?family=Libre+Barcode+128&lang=en ) and you'll found that this is usual "font-face" definition (woff2 in this case). Local files should work just fine too. – Vitaliy Fedorchenko Oct 24 '17 at 14:02
I saw that... maybe my fonts aren't recognized locally by NReco because he cannot find them (some server mapping properties that are missing for example), but don't worry, as long as it works, it doesn't really matter if I don't have the hand on all my ressources (that's google fonts, it won't move tommorow) – alexay68 Oct 24 '17 at 14:07

NReco imagegenerator doesn't write barcodes correctly

1 Answers1