I've using printJS and jQuery together to print the contents of an HTML div.
The div contains text which is rendered with the 'Annie get your telescope' google font.
When I print, the text is printed using a more standard Web Font rather than the Google Font. If I download the font and host it locally, I get no text at all.
How do I print HTML via printJS and get text in a Google font to render correctly?
Make sure to pass the desired font to printJS. If you are not passing your stylesheet using the css property, you can just pass the font through the style property.
Another thing, currently, print.js is setting a default font for printing, which has been deprecated and will be removed on its next major version (v2). For now, you will also have to pass the font family with the font property.
printJS({
printable: "print-element",
type: "html",
style: `#import url('https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope');`,
font: 'Annie Use Your Telescope'
})
Here is a fiddle with the above example:
https://jsfiddle.net/crabbly/Lt2nvagc/
Related
I am writing a game for Kazakhstan, but Kazakh symbols do not show in UI element InputField.
Did somebody face the problem and can help me?
An UI_InputField element is an element that allows the user to interact writing some text. InputField will set that text into a UI_Text component.
The UI_Text component supports UTF and you can set different fonts to that UI_Text component. Now in order to display correctly your Kazakh symbols the Font that is assigned to the UI_Text component should be able to support those characters.
So the first question is, what font are you using in your UI_Text component?
Here if I get some characters from Kazakh_alphabets and I put them in a TextField/Text using Arial as font.
I got this:
Firefox can display the following character in div but cannot display it in input.
龗 滙 羣 邨 埗 衞
There are two issues here. First, Firefox (like browsers in general) uses a specific default font for input element (though this font depends on user settings). That font may well lack glyphs for some characters that are present in the font used for normal text (whether as per browser defaults or as per your CSS settings). This can be handled by setting the font-family for input elements suitably. To set it the same as the normal text font, you can use the following CSS rule:
input { font-family: inherit }
Second, your data contains Private Use code points such as U+F5D0. They have absolutely no meaning outside of private agreements on their use. In HTML, they are typically used in conjunction with privately-encoded “icon fonts” that have fancy icons placed in those code points, though they might also be used e.g. for rare Chinese characters (typically occurring in proper names only) that have not (yet) been encoded as characters in Unicode.
This means that such a specific font must be used to make any sense of the content. To make things work across devices, this should be a downloadable font specified with #font-face. If you have done that, simply declare that same font for input elements in CSS.
The browser shoule be able to display HKSCS if the Font set as 細明體_HKSCS, MingLiu_HKSCS, PMingLiU or MingLiU.
I tested in Firefox, Internet explorer and Chrome.
I am developing a Windows Store chat app.
In this apps, I am using a TextBox to receive message content from the user. I want to implement Emoticons (Smileys) such that typing a code gives a respective image inline with the text.
For example, for :), I want to have a 'smile' image.
What you'll need to do is use a RichTextBlock to display your text. This will give you access to a adding in an InlineUIContainer block where necessary.
So, your process will be:
Accept text in a regular text box
Parse the text into a series of Inlines (Run, InlineUIContainer, etc)
Create a new Paragraph for the message
Add the Inliness to the Paragraph.
Add the Paragraph to your RichTextBlock's Blocks property (a BlockCollection).
For each piece of text:
Split the text, likely using Regex, searching for the keys which trigger an Image (':)', '(heart)', etc).
For each non-image text, create a Run with the Text set to the text of the split
For each Image, create an InlineUIContainer and an Image. Set the Image source to the proper Image path, then set the Child of the InlineUIContainer to the Image.
Add the Run or InlineUIContainer the Paragraph via Paragraph.Blocks.Add(Inline).
Certain icons may be included in the Segoe UI Symbol Font Family. If this is the case, you may choose to not use an Image for that symbol, and instead use a Run with the FontFamily set to Segoe UI Symbol. You can play around with the FontSize if you want them to be more prominent.
Hope this helps and happy coding!
I've been looking for a solution for this for a while now and the only fixes I found only affect the way the text is displayed in the editor itself and not how the generated text will look when sent/saved somewhere else. I'm talking CSS fixes and stuff like that.
I'm using CKEditor to compose and send emails trough our web application and while the css fixes change the font shown in the editor itself, the recieved emails are still displayed in TNR or whatever is inherited from the email client. Unless, of course, I change the font and size from the plugin for each paragraph.
From what I've noticed whenever you set the font and size from within the plugin, CKEditor creates a span (well, actually two, one with the font and one with the size) with the newly changed style (for example <span style="font: Arial"><span style="font-size: 12"></span></span>) and I figure I could just wrap the whole result in a span or div with my desired font and size styling, but that might interfere the users' templates and styles.
Is there any way to set the default text styles (as seen by the recipient of the emails) from the plugin itself or will I have to come up with a hack to it.
This is the only way I have found to force ck editor to create a default font. IE it wraps entered text in a (default) font span even if no font has been selected, and therefore will output formatted text. If you want the changes to be universal, add the following to config.js. Otherwise, it should be possible to add it to just one instance as well. Though I haven't tried that.
config.font_defaultLabel = 'Arial';
This will make the drop down default to 'Arial'. Though even this doesn't work the way I would hope. First, the editor must be activated (not just loaded) for the drop down to default. Then unlike a manual selection the value is not highlighted in the drop down box. It just displays.
Then add this below your default configuration options:
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.setData('<span style="font-family:Arial, Verdana, sans-serif;"></span>');
});
This will pre-populate the text area with the span you need. However you must include some character(s) in the span tag to force this 'hack' to work. So you're going to be stuck with something in your output you don't really want.The original version of this I found somewhere on the web used:
Which seems relatively innocuous.
I have looked and looked for a better way (and would love if someone knew one). Most people simply say capture the output and reformat it. That really wasn't an option for me. It may also be possible to accomplish this with a custom plugin. That too wasn't really viable for me.
Hope this helps someone save some time at least.
P.S. The original came from the support board at CK editor. Here is the link: forum
If you want to change style of text outside editor, then you have to style it... outside editor :). AFAIK in email stylesheets can't be used, so the thing that left you is wrapping with div having inline styles.
To have the same result in CKEditor you should edit contents.css and set the same styles for body as for div wrapper.
Next step would be to remove format combo from toolbar, because it's based on markup. For emails it'll be better to use styles combo, because you can define inline styles, tags and attributes that are applied with each style. Check styles.js.
Add this into your config.js File
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '20';
Then it will be changed when your CKEditor was triggered.
I have such problem: in all browsers font is what I want - "Helvetica Neue", but Firefox use second font in font-family list.
I checked it in Firebug:
/rule from Bootstrap.scss/
p → "Helvetica Neue",Helvetica,Arial,sans-serif
parent matched//
Here is screenshot of what I have in Firefox:
And in Chrome:
or my font is not valid for Firefox ?
The whole reason for font-family list of font types is that if the client machine/browser doesn't have the first font on the list available, it will use the second, and if the second is not available it will use the third.
EDIT:
If you really must use the font family you want, you will need to get the font file for it and load it. here is a link to the thread that discusses this:
How do I load external fonts into an HTML document?