There are two ways of providing dynamic text data to be printed on your labels. In both cases the text can be “styled”, so different parts of the text will use different fonts, sizes and/or styles.
The first way covers most use cases for text formatting needs, it is simple, and, of cause, has some limitations. The limitation is that it supports line-by-line formatting only. So, each line can have its own formatting, but all characters in the same line will use the same formatting. If this is OK for your application, then here are the steps needed to utilize this method. first, you have to design you label layout/template. The easiest way to design a label is by using DYMO Label software. While designing, type a sample data for a label object, and apply some formatting, on line by line basis, e.g. make the first line bold, save the file, and put it on your server.
Those are manual steps, now we will need some JavaScript. Load the label by using openLabelXml. Now you can set your real data by using setLabelText or, if you need to print multiple labels, by using a LabelSet. You pass a plain string without any formatting to the setLabelText method, and the library will apply line-by-line formatting for you based on the sample data in the label file. For example, if you call setLabelText(‘Will E. CoyotenACME Birdingn2200 Desert Meadows WaynLas Vegas, NV 89122’), the output will be like that:
The second way to format the text is by using so called “Text Markup” feature. It is some what more complex than the first formatting method, but in return you have the full control over the font attributes and can do character-by-character formatting. First, you design your label as described above, but you don’t have to specify any sample data. Next you have to construct a “text markup”. A text markup is an xml string contains tags controlling font attributes, plus plain text data. The Supported tags are ones similar to HTML tags: <font>, <b>, <i>, <u>, <s>, <br>. Full xml-schema definition is available here. After you have the markup text, you can print it by using a LabelSet and setTextMarkup method.
var labelSet = new dymo.label.framework.LabelSetBuilder(); var record = labelSet.addRecord(); var textMarkup = '...'; record.setTextMarkup('Text', textMarkup); label.print('DYMO LabelWriter 450', null, labelSet.toString());
Here is an example demonstrates different formatting capabilities: http://labelwriter.com/software/dls/sdk/samples/js/TextMarkup/TextMarkup.html, and the corresponded JavaScript http://labelwriter.com/software/dls/sdk/samples/js/TextMarkup/TextMarkup.js. Type anything into the “Text to Print” text box and click on any button below. The output should correspond to the button’s caption. The corresponded text markup will be copied to the “Text Markup” text box, so you can examine it without going into JavaScript debugger. Also, you can just type any text markup in the box and print it by clicking on “Print text markup” button. Just make sure it is a correct xml and correct markup. If it is not, a runtime error/exception is thrown.
Having trouble with maintaining the formatting (font size) when using method 1 from above. I have designed my label using DYMO Label software. I can print the label with formatting intact, but if use setLabelText(“Will E. CoyotenACME Birdingn2200 Desert Meadows WaynLas Vegas, NV 89122”) Label can be printed with the new text but all formatting is lost.
Any ideas would be helpful.
The second way lets you control font attributes and plain text data.
There doesn’t seem to be a function setLabelText but setObjectText… can you explain how to use setObjectText?
The Printing QR Code Part 2 blog post shows how to use the setObjectText. This blog post can be found here http://dymodevelopers.wordpress.com/2011/12/16/printing-qr-code-part-2/
I’m trying to simplify the example where I can have the added benefit of the tags, without the extra buttons. I seem to break the code if I remove the buttons out of the tags, or If I remove the var out of the javascript. either way, the printer selector immediately stops working.
I just need
Text Box with advanced formatting
Printer Selector
Print Button
i’ll be the first to admit I’m terrible at javascript, but I can’t figure out why I can’t get it to work.
Have you checked the PreviewAndPrintLabel JavaScript sample which comes with the DYMO SDK?
Yeah, I’ve looked at it but I’m having a hard time combining the two concepts.
I might be easier when you forward your question to DYMO according to the SDK Troubleshooting Tips post which can be found here http://developers.dymo.com/2011/10/12/sdk-troubleshooting-tips/
I used TextObject to print, but How would I find the size of the field and how it’s being rendered (font size/style/etc.) so I could determine where to put word breaks to wrap text?
The best approach to your problem is to use DLS to design the label that you want to use. You can set the font and font size too. When you save the label file, it will contain the label xml that you want to include in your labelXml variable.
Useful post, thank you! I still am unsure of one thing though: how to change text styles.
I looked at the schema and example for Method 2, but I’m unsure how to go about making the input text print out bold without having to manually change it to bold, like in the example. That is, how can I hard code the input text to print out bold every time?
Hi Andrew,
As the mentioned in the post, you need to either create a sample file with the formatting you desire or use text markup. The closest you can get to hardcoding would be to use method 1.
Do you have any xml examples for setting the TextMarkup on the TextObject in a C# Windows Form Application? Everything I finf=d is in JS. Thanks
The best way to see an example is to use DLS to create a label, put some text in a text object and open the label file in any text editor. The file is saved in XML and will be relatively easy to read.
I am trying to set default and fallback font on the label xml, like this:
The idea is to use Courier wherever available, and Consolas otherwise.
It works good on Windows, but on Mac it’s ignoring the setting and displaying another unrelated font (Helvetica like.)
I am using the web service to generate the label from an XML, through a web page. Maybe there is another way to pass-embed the fonts.
Thanks in advance.
The code example might have gotten trimmed as it contained markup, the overall idea is specifying font family as “Courier,Consolas” instead of just saying “Courier” or “Consolas”.
Hi Lorenzo,
We don’t support setting multiple fonts on a text string… If you try to use a font that does not exist on the OS, the system default font will be applied.
Ron