Considerations and Guidelines for Bluetooth Thermal Printer and Print Layout Setup

Bluetooth Thermal Printer Device Considerations

Review these considerations before you set up and use a Bluetooth thermal printer:

• Each manufacturer has their own unique standards and configurations for Bluetooth thermal printers. CG Cloud mobile app may require adjustments based on your specific printer model.
• For optimal compatibility, use Bluetooth thermal printers that's ESC/POS protocol compatibile and supports raster mode.
  • We've tested Everycom EC-400 80mm 3 Inches Mobile Thermal POS Receipt Printer and have observed these issues:
    • Text elements below an image may not align as expected. Adding a linefeed element below the image can resolve this issue.
    • Content below the image can become corrupted at heights of 288 and 432, but the issue may vary across different devices.
  • We've also tested Shreyans 80mm Thermal Receipt Printer and observed these issues:
    • H1 and H2 text size options appear identical in the printout. This is because this printer supports two primary font sizes-normal and large.

  If you intend to use other ESC/POS devices, make sure you test them thoroughly for compatibility with CG Cloud mobile app.

• Use Bluetooth thermal printers with 203 dots per inch (DPI) resolution and Horizontal Character Count (HCC) of 48 counts.

Font Size and Style Recommendations

• The maximum number of ASCII characters that the printer can print in a single horizontal line is 48.
• Don’t use global styles and font sizes.
• Retain the default printer font for a proper printed output. Avoid modifying the default font size as it may affect the print output.
• Special characters and non-ASCII characters such as pound sign ($) are skipped during printing. Depending on hardware compatibility, the print process can sometimes exclude superscript and subscript in invoice text.
• Bold face for lengthy headings- For longer text headings, the bold font may appear weak in printed output. This is a hardware limitation and varies depending on the printer model.
• Watermark appears as H2 heading text at both the top and bottom of your printed output, as well as in the print preview of the document.

Print Layout Design Considerations

Adhere to these considerations when you define the layout to print PDF invoices or reports from CG Cloud mobile app in text mode.

• Every table must have a <thead> element. If <thead> is missing, the build contracts action in VS Code based Modeler fails with an error.
• Table column width
  • Specify the width of each element in <thead> as a percentage and ensure that their total sum is 100%. If the sum of width exceeds 100% or the width value isn’t percentage, the build contracts action in Visual Studio Code based Modeler fails with an error.
  • The width percentage of every column (<th>) must be greater than or equal to 8%. An 8% width converts to about 3 or 4 columns in a 48-character-wide print. As a result, columns using this minimum width will take up only 3 or 4 characters in the print output, depending on the available space.
  • If the text in a table cell exceeds its defined width, it may wrap incorrectly, leading to misalignment of subsequent cells in the same row.
  • If a word in a table body cell exceeds the column width and the text is formatted bold, it may cause an encoding exception. In such cases, the app shows an error when you tap the print button.
• Table column alignment
  • The alignment you define for any column in <thead> applies to all the elements in that column. Individual alignment of elements in the table isn’t supported.
  • Specifying alignment is optional. If you specify an alignment, you can use left, right, or center alignment. If you don't specify an alignment, then left is applied as the default alignment.
• Single row in thead
  • The <thead> can contain only one <tr> element.
  • All <th> elements in this <tr> must use the prescribed widths.
  • If there are multiple <tr> elements in the <thead>, the framework considers only the first <tr> for width calculations.
  • The <tr> element within <thead> must contain at least one <th> with a valid width.
• To add an empty line (newLine) between elements in the report layout, use the lineFeed element.
• Top and bottom margins may not perfectly match between print preview and printed output for elements such as image, headings (H1, H2), and tables.
• To add a horizontal line to your report layout, use the <rule> element. You can use multiple instances of horizontal line in the report layout, just that they can't be consecutive. Add some other elements between them.

  Narrow tables (<100% width) show full-width horizontal rules in print, though the print preview shows table-width rules.

• These TableLayout settings control how horizontal lines appear in printed tables:
  • headerLineOnly: Adds a horizontal line after the first row of the table.
  • lightHorizontalLinesMainItemsOnly: Adds a horizontal line after each row.
  • lightHorizontalLines: Adds a horizontal line after each row.
  • noBorders: Borders aren't added to the table.
• Use these elements and attributes in print layout:
  • h1
  • h2
  • p
  • rule
  • lineFeed
  • tbody
  • thead
  • tr
  • td
  • pageSize and watermark in ReportLayout
  • src, width, and alignment in img
  • name and tableLayout in table
  • left, right, or center type of alignment and width in % in th
• Don't use these elements and attributes in print layout contract. If you include any of the items from this list in the layout the contract building action in VS Code based Modeler fails with error.
  • Header
  • Footer
  • pageNumber
  • dontBreakRows
  • styles
  • div
  • Image inside a table
  • Multiple <tr> in <thead>
  • PageMargins attribute in reportLayout
  • Attributes in <th>- italics, bold, rowSpan, and colSpan
  • Attributes in <td>- italics, bold, rowSpan, colSpan, and width

Image Considerations

• Image tag usage constraints and best practices:
  • Include images only in the <img> tag in a report layout. Don’t add images in a table or nest images within any other layout element.
  • Width specification is mandatory for an image. Specify width in an integer value. The app framework calculates the height using the aspect ratio of the image.
  • Don't use Fit attributes in image.
• Image printing speed and quality
  • The print speed for images is slower compared to text and can vary based on the printer and the image alignment in the report layout. Print speed is faster with left alignment, followed by center alignment, and slowest with right alignment.
  • When you print large images with dark colors, the print sometimes shows thin white lines.