Question 40254 in PHP Question posted in
Official manual can be found here.

HTML barcode using code128(type b), with use of google fonts – PHP

In my job, the manager requested for html page (in php) that will create html barcode(not image, not drawing, without use of TCPDF classes) – and I just can’t understand how it’s work.
I took sample from the interent , tried to run it but there is no barcode shown.
this is my example code:

Here is my code:

<html>
 <head>
   <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
   <style>
     .ss {
      font-family: "Libre Barcode 128 Text";
          font-size: 24px;
         }
    </style>
 </head>
    <body>
       <br /><span id="test" class="ss">Ìqms3NÎ</span><br />
    </body>
 </html>;

What I’m doing wrong and how can I solve it?

Create php barcode using code-128 in HTML using google fonts , with no image or drawing

Tags:

2

Answers


  1. 0

    This process is 2 stepped.

    Step -1
    You need to generate proper 128 code encoded text

    Step-2
    then using the libre fonts as you have done display it.

    Easiest way to do it is to use below mentioned open source encoder written by thanks to hbgl

    Please find the link to encoder :
    php-code-128-encoder

    Above mentioned page as all the required instruction..
    It should solve your issue.

    additional Info:
    Documentation from the author of font:
    Libre Barcode documentation

    Login or Signup to reply.
  2. 0

    I don’t have an example of PHP using Libre Barcode font, but I have PHP using custom font in the form of a WordPress plug-in, and JS using Libre Barcode Code 128.

    The key is that if you use the Libre Barcode Code 128 font, some code has to calculate the checksum.

    var buttonGen = document.getElementById("btnGen");
buttonGen.onclick = function () {
  var x = document.getElementById("textIn").value;
  var i, j, intWeight, intLength, intWtProd = 0, arrayData = [], fs;
  var arraySubst = [ "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê" ];

/*
 * Checksum Calculation for Code 128 B
 */
  intLength = x.length;
    arrayData[0] = 104; // Assume Code 128B, Will revise to support A, C and switching.
    intWtProd = 104;
    for (j = 0; j < intLength; j += 1) {
            arrayData[j + 1] = x.charCodeAt(j) - 32; // Have to convert to Code 128 encoding
            intWeight = j + 1; // to generate the checksum
            intWtProd += intWeight * arrayData[j + 1]; // Just a weighted sum
    }
    arrayData[j + 1] = intWtProd % 103; // Modulo 103 on weighted sum
    arrayData[j + 2] = 106; // Code 128 Stop character
  chr = parseInt(arrayData[j + 1], 10); // Gotta convert from character to a number
  if (chr > 94) {
    chrString = arraySubst[chr - 95];
  } else {
    chrString = String.fromCharCode(chr + 32);
  }
  
  // Change the font-size style to match the drop down
  fs = document.getElementsByTagName("option")[document.getElementById("selList").selectedIndex].value;
  document.getElementById("test").style.fontSize = fs  + 'px';
  
  document.getElementById("check").innerHTML =
    'Checksum = ' + chr + ' or character ' + // Make It Visual
    chrString + ', for text = "' + x + '"';
  
  document.getElementById("test").innerHTML =
    'Ì' + // Start Code B
    x + // The originally typed string
    chrString + // The generated checksum
    'Î'; // Stop Code
}
      <head>
    <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128+Text" rel="stylesheet">
    <style>
      td, th {
        text-align: center;
        padding: 6px;
      }

      .ss {
        font-family: 'Libre Barcode 128 Text', cursive;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    &nbsp;Font Size:&nbsp;
    <select id="selList">
      <option value="24" selected>24px</option>
      <option value="30">30px</option>
      <option value="36">36px</option>
      <option value="42">42px</option>
      <option value="48">48px</option>
      <option value="54">54px</option>
      <option value="60">60px</option>
      <option value="66">66px</option>
      <option value="72">72px</option>
      <option value="78">78px</option>
      <option value="84">84px</option>
      <option value="90">90px</option>
      <option value="96">96px</option>
    </select>&nbsp;

    <input type="text" id="textIn"></input>
    <input type="button" id="btnGen" value="Generate Code 128 Checksum" tabindex=4/>
    <div id="check"></div><br /><span id="test" class="ss">ÌMaking the Web Beautiful!$Î</span><br />
    <p>This is a demonstration of use of the Libre Barcode 128 Font.</p>
    <p>Because the Libre Barcode Code 128 font does not generate checksums, you need this component to produce a scanning barcode.</p>
    <p>To use, just enter the text you want to embed in the barcode and press the generate button. Happy barcoding!</p>
    <p>By the way, Libre Barcode 128 Font uses the following high ASCII / unicode characters to implement the control codes symbols. (This is essentially adding 100 to the value, in other words 'Ã' is U+00C3 (195) to 'Î' is U+00CE (206).)</p>
<table border="3">
    <tr>
    <th>Value</th>
    <th>Encoding</th>
    <th>Subst</th>
  </tr>
<tr><td> 95</td><td>A: US, B: DEL, C: 95</td><td>Ã</td></tr>
<tr><td> 96</td><td>A: FNC 3, B: FNC 3, C: 96</td><td>Ä</td></tr>
<tr><td> 97</td><td>A: FNC 2, B: FNC 2, C: 97</td><td>Å</td></tr>
<tr><td> 98</td><td>A: Shift B, B: Shift A, C: 98</td><td>Æ</td></tr>
<tr><td> 99</td><td>A: Code C, B: Code C, C: 99</td><td>Ç</td></tr>
<tr><td>100</td><td>A: Code B, B: FNC 4, C: Code B</td><td>È</td></tr>
<tr><td>101</td><td>A: FNC 4, B: Code A, C: Code A</td><td>É</td></tr>
<tr><td>102</td><td>A: FNC 1, B: FNC 1, C: FNC 1</td><td>Ê</td></tr>
<tr><td>103</td><td>Begin Code A</td><td>Ë</td></tr>
<tr><td>104</td><td>Begin Code B</td><td>Ì</td></tr>
<tr><td>105</td><td>Begin Code C</td><td>Í</td></tr>
<tr><td>106</td><td>Stop Code</td><td>Î</td></tr></table>
  </body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search