How to: output Euro symbol in pdfkit for nodejs - node.js

Is it possible to display the Euro symbol in pdfkit for nodejs without having to embed an external font?
I am using pdfKit to generate invoices and would like to prefix my currency amounts with the Euro Symbol (€).
I've tried a number of approaches and none worked:
doc.font('Helvetica-Bold')
.fontSize(12)
.text('€', 10, 10); // Alt+0128 on keypad
doc.font('Helvetica-Bold')
.fontSize(12)
.text('\u20AC', 10, 10);

Turns out it is a font issue:
unicode works, but you have to make sure that the font you are using
includes the characters you want to use. Unlike your operating system,
PDFKit does not do any automatic font substitution.
Source: Reddit Thread comment by /u/devongovett
I tested two fonts that were included with pdfkit. Both 'Helvetica-Bold' and 'Times-Roman' didn't work with the unicode symbols. I noticed in the documentation for fonts that you can add in your own fonts, so I gave the Cardo Font (hosted on Google Fonts) a go as it supports many unicode characters.
Sure enough, it worked. Here is the script I used for testing (Make sure you have the Cardo font available):
var PDFDocument = require('pdfkit');
var doc = new PDFDocument();
doc.registerFont('Cardo', 'Cardo/Cardo-Regular.ttf')
doc.font('Cardo')
.fontSize(20)
.text('Testing [\u20AC]', 10, 10);
doc.write('out.pdf');
If you're set on using Helvetica-Bold, download a copy of the font elsewhere (make sure it supports the unicode characters you're after) and register it as I have with the Cardo font.

Related

What base64 format to use for images in opendocument/odt <office:binary-data>, possibly base64ing with nodejs?

I'm attempting to save an image base64'ed with nodejs in a raw format to an ODT file for display in OpenOffice Writer.
The spec was not very clear, but I found an example. However, when I post the following base64'd image (that looks fine in html), I get a "Read-error" in OpenOffice and the image does not display.
The spec says that it uses rfc2045, but that spec is not very specific (unless I'm missing something).
Here's what I have:
<text:p text:style-name="qr-wrapper">
<draw:frame draw:name="img1" svg:width="150.0pt" svg:height="150.0pt">
<draw:image xlink:href="Pictures/0.png" xlink:type="simple" xlink:show="embed" xlink:actuate="onLoad">
<office:binary-data>
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
</office:binary-data>
</draw:image>
</draw:frame>
</text:p>
I could use a base64 conversion library, like for instance this nodejs one. What format is expected?
Well, folks the answer is as follows:
<text:p text:style-name="qr-wrapper">
<draw:frame draw:name="img1" svg:width="150.0pt" svg:height="150.0pt">
<draw:image xlink:type="simple" xlink:show="embed" xlink:actuate="onLoad">
<office:binary-data>
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
</office:binary-data>
</draw:image>
</draw:frame>
</text:p>
That is to say
the encoding cannot be prefixed with data:image/png;base64,
the <draw:image> element cannot have a xlink:href="Pictures/0.png" attributed. Even though the spec says it will be ignored if <office:binary-data> is present. Shrug.

Xamarin Forms Android Label displaying extra characters

I am pulling text from an embedded .txt file and then displaying it in a label. iOS is fine, but Android shows extra characters. I am missing something simple but not sure what. Thanks for the help.
This (in a .txt file):
0.2.3
- Fixed spelling errors
- Added version number in slide-out menu
- Squashed bugs
0.2.2
- Database Change Log Added.
- Bug Fixes.
0.2.1
- Bug Fixes
Turns into this:
The space characters are bring shown. How do I prevent this?
Retrieving the text:
var assembly = typeof(MainMenuViewModel).GetTypeInfo().Assembly;
Stream stream = assembly.GetManifestResourceStream("ReleaseNotes.txt");
var text = "";
using (var reader = new StreamReader(stream))
{
text = reader.ReadToEnd();
}
ReleseNotesText = text;
The Label:
<Label Text="{Binding ReleseNotesText}" HorizontalTextAlignment="Start" HorizontalOptions="Fill" VerticalOptions="CenterAndExpand" TextColor="{DynamicResource TextColor}" FontSize="18" />
More likely your newlines are \n in the embedded text file stream
Just convert them to the correct environment newline. Newline character(s) may vary depending on the running platform... in .NET you have the handy Environment.NewLine, thus:
ReleseNotesText = text.Replace("\n", Environment.NewLine);
Edit: after taking a look at the exact text file in the comments, it looks like it was using the U+2028 unicode sequence for newlines. The correct replacing code would be:
ReleseNotesText = text.Replace("\u2028", Environment.NewLine);

How to use Modern UI Icons in AppBarButton

I'm developing a Windows 8.1 Store App. I have a CommandBar control with a couple of AppBarButtons inside. Using the standard icons is easy, I just set the icon property to the appropriate string like so :
<AppBarButton Icon="Download" Label="Download Files"/>
I'd like to use a couple of custom icons from the very nice free collection Modern UI Icons. Ideally, I'd like to be able to set the icon property in much the same way :
<AppBarButton Icon="transit.distance.to" Label="Distance to destination"/>
This would refer to this icon : PNG / XAML
Is this possible ?
If not, what are the alternatives ?
Tim Heuer proposes using a font file, although at present the font files available here only cover a sub-set of the icons, and also this code is quite unreadable :
<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="" FontSize="37.333" />
Would you believe that shows a twitter icon?!
Tim Heuer also proposes using vector data, and one of the commenters explains how the vector data can be rolled into a style. I could do that, but then I would have to copy and paste the path data for each icon I want to include ?
Should I be using the PNG files, as explained in this question ? That looks pretty messy as well.
What a nightmare!
I'm not sure what the nightmare part is -- you want to use a custom icon that isn't present in the 200+ supplied defaults. You have options:
Use SymbolIcon and supply your own font. You note that you don't like that the code feels unreadable. Unicode ranges are universally used for symbol fonts and I agree that Unicode isn't human-readable, but a simple code comment would help ;-) Fonts give you the most ease and flexibility because they are also vectors.
PathIcon. You convert your image into vector geometries we can render. This would be the second best, but also requires a bit fine tuning of the vectors to get right. For people not familiar with working with geometries this can be annoying at first. Blend and Inkscape are helpful tools here.
BitmapIcon. This would allow you to use your PNG, however you now must supply multiple of them for different scales and states. This is my least favorite option as it requires most work, but for some may be the simplest. Now your problem you will hit is there is an issue with BitmapIcon for non-rectangular shapes (which looks like your icon is). This won't have the fidelity you seek due to a bug in rasterizing.
Contact metroicon author and see if he can put it into the font file so you can use option #1 :-)
Maybe this is what you're looking for:
<AppBarButton Label="Transit">
<AppBarButton.Icon>
<PathIcon Data="F1 M 3.912,17.38C 4.89067,17.38 5.688,18.2653 5.688,19.3586C 5.688,20.448 4.89067,21.3333 3.912,21.3333C 2.92667,21.3333 2.136,20.448 2.136,19.3586C 2.136,18.2653 2.92667,17.38 3.912,17.38 Z M 16,17.38C 16.984,17.38 17.776,18.2653 17.776,19.3586C 17.776,20.448 16.984,21.3333 16,21.3333C 15.016,21.3333 14.224,20.448 14.224,19.3586C 14.224,18.2653 15.016,17.38 16,17.38 Z M 21.3333,18.9626L 18.464,18.9626C 18.292,17.62 17.2547,16.5933 16,16.5933C 14.7453,16.5933 13.708,17.62 13.536,18.9626L 6.37467,18.9626C 6.20267,17.62 5.16667,16.5933 3.912,16.5933C 2.656,16.5933 1.62,17.62 1.448,18.9626L 0,18.9626L 0,10.2706C 0,9.396 0.636,8.69196 1.42133,8.69196L 19.5573,8.69196C 20.3387,8.69196 20.9787,9.396 20.9787,10.2706M 20.4427,10.2706L 19.1973,10.2706L 19.1973,15.8013L 20.62,15.8013M 17.776,13.432L 17.776,10.2706L 14.224,10.2706L 14.224,13.432M 13.5107,10.2706L 9.95333,10.2706L 9.95333,13.432L 13.5107,13.432M 9.24533,10.2706L 5.688,10.2706L 5.688,13.432L 9.24533,13.432M 4.97867,10.2706L 1.42133,10.2706L 1.42133,13.432L 4.97867,13.432M 14.5787,2.36932L 12.4427,0L 15.2867,0L 17.776,2.45862L 17.776,0L 19.1973,0L 19.1973,6.31732L 17.776,6.31732L 17.776,3.85864L 15.2867,6.31732L 12.4427,6.31732L 14.5787,3.948L 7.73467,3.948C 7.41733,5.31195 6.30267,6.31732 4.97867,6.31732C 3.40667,6.31732 2.136,4.90533 2.136,3.16132C 2.136,1.41064 3.40667,0 4.97867,0C 6.30267,0 7.41733,1.00531 7.73467,2.36932L 14.5787,2.36932 Z " HorizontalAlignment="Center" VerticalAlignment="Center"/>
</AppBarButton.Icon>
</AppBarButton>
Hope this helps!

Unicode strings not showing in Win32 ComboBoxEx

I am creating a WC_COMBOBOXEX on Windows Vista and adding strings to it, but they don't show up in the control. The same strings show up fine if I use the old WC_COMBOBOX with CB_ADDSTRING.
I am calling InitCommonControlsEx with ICC_USEREX_CLASSES and creating the comboboxex using CreateWindowEx with style WS_CHILD|WS_CLIPSIBLINGS|CBS_SIMPLE|CBS_SORT|CBS_HASSTRINGS (no extended styles). I am adding the strings using
COMBOBOXEXITEM cbem = {0};
cbem.mask = CBEIF_TEXT;
cbem.iItem = -1;
cbem.pszText = L"hello";
SendMessage(hWnd_, CBEM_INSERTITEM, 0, TOLPARAM(&cbem));
The combobox comes up empty but when I move the cursor up and down in the editcontrol/listbox, I see funny block characters sometimes.
Eventually, I want to add it as a CBS_DROPDOWNLIST to a rebar control but I read somewhere that comboboxex works a lot better in there than the old combobox.
Thanks.
From MSDN:
ComboBoxEx controls support only the following ComboBox styles:
CBS_SIMPLE
CBS_DROPDOWN
CBS_DROPDOWNLIST
WS_CHILD
So CBS_SORT and CBS_HASSTRINGS may be messing up the style bits.
Does it help if you send CBEM_SETUNICODEFORMAT?

openlayers kml with external styles

I'm trying to move my kml styles to an external document for use with OpenLayers. The styles work when they are included directly in the kml file.
At first I thought I could use straight kml for this with the styleUrl tag:
<styleUrl>http://localhost/map.kml#myIcon</styleUrl>
However, when I try to do that, the map.kml file never gets requested, and the markers don't show up. I've verified that the styleUrl url works.
I'm loading my kml using:
new OpenLayers.Layer.GML('Name', 'kml_path', {
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true
},
projection: map.displayProjection
});
There are some tantalizing options called 'styles' and 'styleBaseUrl' in the OpenLayers.Format.KML API, but I cannot find any documentation about what they are for or how to use them. Does anyone have any experience with these?
One way could be, have a separate SLD external file with styles and apply it to your GML layer.
Take a look at the SLD OpenLayers code example at http://openlayers.org/dev/examples/sld.html and just replace the example layers with your layer and replace the styles in the sld-tasmania.xml file. This way, you would not need the option extractStyles in the formatOptions.
In formatOptions, try adding maxDepth:10 or some such integer. Here is the api definition.
maxDepth:{Integer} Maximum depth for recursive loading external KML URLs Defaults to 0: do no external fetching
With it defaulting to 0, I would suspect that it downloads 0 external kml files.
I really don't have any experience on KML, so I'm sorry if this is totally off. I just read the code for KML layers, especially the style portions. From your styleUrl tag it looks as the styleBaseUrl should be http://localhost/map.kml, based on the code in KML.js:
parseStyleMaps():
this.styles[(options.styleBaseUrl || "") + "#" + id] =
this.styles[(options.styleBaseUrl || "") + styleUrl];
parseStyles():
var styleName = (options.styleBaseUrl || "") + "#" + style.id;
The styles parameter seems to be initialized and rewritten each time the code reads the data, so that won't do any good I think.

Resources