I've got my wordcloud looking pretty excellent now. But one problem I'm having is that at random times, and on random browsers, random words (up to 7) don't get the font family applied.
For instance, this is what I get on my iPhone 13:
You can see that the words "Open", "Fun", "Felt", "New", "Deal", "Feels", and "Genuinely" are all appearing in a serif font.
A coworker on a desktop, using Chrome, is getting only the word "Deal" in another font. On my desktop, in FireFox, Chrome, and Safari, everything looks fine (except for a bit of cutoff along the bottom that I don't understand...yet).
I'm using the Roboto font throughout my website, but in my css I've got fallbacks. I'm not sure how to create a fallback in the WordCloud2 script though. But I'm honestly not even sure if having a fallback would help. This seems like a script glitch of some sort, but I've no idea how to track it down.
Here are the options I have set:
list: list,
FontSize: 250,
fontFamily: 'Roboto',
fontWeight: '900',
minFontSize: 10,
backgroundColor: '#fff',
color: function (word, weight) {
return weight > 9 ? '#32587d' :
['#b5c1af', '#c88362', '#e0c094'][Math.floor(Math.random() * 3)];
},
weightFactor: 19,
drawOutOfBound: false,
shrinkToFit: true,
wait: 50,
shuffle: false,
abortThreshold: 0,
abort: function noop () {},
minRotation: 0,
MaxRotation: 0,
rotationSteps: 0,
rotateRatio: 0,
classes: null,
hover: null,
click: null
Your problem is actually really simple. Not everyone has the font file for Roboto. To resolve this issue you can do one of the following.
Either add backup fonts:
fontFamily: 'Roboto, Arial, sans-serif',
or
Add the following code from google fonts so that every browser can load the font file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Related
Per these guidelines:
https://learn.microsoft.com/en-us/bingmaps/styling/map-style-sheet-entry-properties#mapelement-properties
I am trying to set the map style. All properties are working except "fontFamily"
I'm using this google font temporarily, but I have also tried 'serif', 'Times', and 'Times New Roman' and none of them show any difference.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">
var sampleStyle = {
"elements": {
"mapElement": {
"labelVisible": true,
"fontFamily": 'Rye',
//"fontFamily": 'serif',
//"fontFamily": 'Times',
//"fontFamily": 'Times New Roman',
"labelColor": "#007bff",
},
},
"settings": {
"landColor": "#F6F4E3"
},
"version": "1.0"
};
The fontFamily style option I believe is only supported by the Bing Maps UWP map control (Windows). Most of the Bing Maps styling was designed for the UWP control and only a subset of those styles were exposed in the Web SDK and static map image service. Unfortunately it doesn't look like they have clearly called out which styles are supported where in their documentation.
If you use the Map Stylesheet editor application available here https://www.microsoft.com/en-us/p/map-style-sheet-editor/9nbhtcjt72ft, it will show which options are available for the web control, static map, and UWP map control, as well as generating sample code for each.
I'm using Workbox(V5) and in my workbox-config.js I precached the fonts (.woff and .woff2 formats) that are needed for the 3rd-party CSS styles that I'm using, by specifying this for the globPatterns property:
// workbox-config.js
module.exports = {
globDirectory: './',
globPatterns: [
'**/*.{html,ico,woff,woff2}',
],
globIgnores: [
'node_modules/**/*',
'{.,_}*/**/*',
'**/*.{md,txt}',
'Gemfile*',
'package*',
],
additionalManifestEntries: [
{
url: './manifest.webmanifest',
revision: null, // I have also precached my manifest file like this. Is it the best practice?
},
],
swDest: './sw.js',
sourcemap: false,
};
Now in the .css file of the 3rd-party, I can see that the needed fonts are being used with the #font-face rule that includes a query parameter in its URL value:
#font-face {
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff?4601c71fb26c9277391ec80789bfde9c") format("woff"),
url("./fonts/bootstrap-icons.woff2?4601c71fb26c9277391ec80789bfde9c") format("woff2");
}
Well, if I remove the generated hash that has been added to the URL, when I run my PWA offline, the precached fonts show up just fine... But when the styles are calling the fonts with the hash, the precached fonts won't show up!
I have also tried to precache the fonts in my HTML file's head tag and the do runtimeCaching for the .woff and .woff2 formats instead of precaching them by the globPatterns property, but still no luck!
<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff2" type="font/woff2" crossorigin="anonymous">
So I was wondering how can we fix this problem?
Thanks a heap,
Ali
You can use the ignoreURLParametersMatching configuration option when generating your service worker to tell workbox-precaching that certain URL parameters can be ignored when checking the cache for a match.
The parameter takes an array of RegExps, and the default is [/^utm_/, /^fbclid$/], which matches some common analytics tracking parameters.
In your particular case, it sounds like the values you want to ignore are all 32 hex characters, so the following configuration should help:
// workbox-config.js
module.exports = {
ignoreURLParametersMatching: [/^[0-9a-f]{32}$/],
// ...other options go here...
};
I’m trying to convert an existing html document with Font Awesome icons included in pdf. I use wicked_pdf for this task. But obviously is creating a pdf some very hard task.
All Font Awesome Icons are replaced with blanks. I need some advise to make things work.
My configuration:
wicked_pdf (1.1.0)
wkhtmltopdf-binary-edge (0.12.4.0)
The generated html looks like this:
<p>
<i class="fa fa-phone"></i> +49 123 4567890
</p>
The controller action for creating the pdf:
def create_pdf
#presenter = PortfolioPDFPresenter.new(#portfolio, self)
html = render_to_string(template: 'portfolios/pdf_templates/portfolio',
layout: 'pdf_layout')
footer_html = render_to_string(template: 'portfolios/pdf_templates/footer',
layout: 'pdf_layout')
title = ActionView::Base.full_sanitizer.sanitize(#portfolio.heading.html_safe, tags: [])
pdf = WickedPdf.new.pdf_from_string(html,
title: title,
author: current_user.fullname,
page_size: 'A4',
margin: { top: 20, bottom: 40 },
print_media_type: true,
dpi: 600,
zoom: 1,
no_pdf_compression: false,
lowquality: false,
outline: { outline: true, outline_depth: 4 },
footer: { content: footer_html },
extra: '--encoding UTF8 --disable-smart-shrinking')
send_data(pdf,
filename: "#{t('activerecord.models.portfolio.one')}-#{current_user.fullname}.pdf",
disposition: 'attachment',
type: :pdf)
end # create_pdf
And finally the layout:
!!!
%html{lang: "#{I18n.locale.to_s}"}
%head
%meta{ content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type' }
%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }
%meta{ 'http-equiv': 'Accept-CH', content: 'DPR, Viewport-Width, Width' }
%title
= t('app_title')
= csrf_meta_tags
= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Exo+2:400,700'
= stylesheet_link_tag wicked_pdf_asset_base64("pdf_styles"), media: 'print'
= stylesheet_link_tag wicked_pdf_asset_base64("pdf_styles")
= stylesheet_link_tag 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'
%body
#main-content
= yield
Faced a similar issue myself. First I wasn't getting any icons and then subsequently, I started getting a weird W-on-top-of-M kind of icon.
Not getting any icons
Was resolved once I added the absolute CDN path to Font awesome to my pdf layout file.
https://github.com/brunzino/wpdf-icon-debug/pull/1/files?diff=split
Getting a weird W-on-top-of-M icon
This wasn't a problem on the server (Ubuntu 16.04). As in, the icon showed correctly on the production site. However on my Mac all icons were replaced by this strange icon. Never really resolved it but read somewhere that this gets resolved by installing the ttf font on the Mac.
Hope this helps
I use Font awesome in Kendo grid. I expect to work without problems , it shows as good as possible , Actually if I click on icon (each icon has parent) it will jump. Any idea about fixing this issue?
Here is my code:
<kendogrid
entity_id='restaurantId'
fields="{restaurantId: {editable: false, nullable: true},rgn: {required: true},type: {required: true},url: {editable: false, nullable: true}}"
controller="restaurant"
tools='false'
colmns='[
{
field: "restaurantId",
title: "id",
width: "100px",
locked: true,
lockable: true,
},
{
field: "type",
title:"type ",
width: "120px",
lockable: true,
minScreenWidth: 500,
sortable :false
},
{
field:"restaurantRateAverage" ,
title:"average ",
width: "80px",
lockable: true
},
{
title: "operation",
width: "110px",
lockable: true,
template: "
<a class=\"warning-color knd-custom-action-btn\" href=\"\\#/foods/add/${restaurantId}\" ><i class=\"fa fa-cutlery\"></i></a>
<a class=\"primary2-color knd-custom-action-btn\" href=\"\\#/delivery-zones/add/${restaurantId}/${restaurantCityId}\" ><i class=\"fa fa-map-marker\"></i></a>
<a class=\"danger-color knd-custom-action-btn k-grid-delete show-${restaurantId}\" href=\"\\#\"><span class=\"fa fa-times\"></span></a>
"
}
]'
hard-delete="true"
></kendogrid>
EDITED :
After reading this link I changed my code :
css :
#font-face {
font-family: "FontAwesome";
/*public/app/admin/assets/fonts/fontawesome-webfont.woff */
src: url("../fonts/fontawesome-webfont.woff") format("woff"),
url("../fonts/fontawesome-webfont.woff") format("truetype");
}
.km-icon:after,
.km-icon:before
{
font: 1em/1em "FontAwesome";
}
html:
{
field:"restaurantRateAverage" ,
title:"average ",
width: "80px",
lockable: true,
template: "<div data-role=\"tabstrip\">
<a data-icon=\"fa fa-check\"> </a></div>"
}
Actually it print fa fa-check and doesn't show fontawesome.
To display font-icons you need not only the font but also the correct CSS to display the correct icon. The "correct CSS" is not the same for everyone, since there are many ways to get the font.
You can get it from http://fontello.com and only select icons you really need (there are also some other services like fontello, I would advise to use on of them to only select the icons you really need)
After you get your font you have to implement it in your site. You already did this step, you declared a #font-face and used the font on your km-icon (font: 1em/1em "FontAwesome";)
Finally you need to say which icon to display for your km-icon, if you get the icons from fontello, you get a demo.html where all the unicode-codes for your CSS are stored, if you get it from the fontawesome site use this cheat sheet. You can either copy-paste the icon directly from there with the developer-tools, but since you don't have the font in your css-editor it will show up as . (or a ? or something similar, depending on what program you use)
Another way to specify it in the CSS is with the -notation, for example:
.icon-example::before{
content: '\e83e';
font-family: "Font Awesome";
}
The last way to add it is to do it like they did it on the fontawesome-site, to add the icon directly into the html, have a look at the font-awesome cheat-sheet site i linked earlier to see what I mean.
I'm trying to add a background color to an event but with no luck.
$('#calendar').fullCalendar('renderEvent', { id: 1, title: 'hello', start: selected_date, allDay: true, color: '#FF0000', backgroundColor: '#000000' }, false);
Any idea why this won't work? The border color seems to work but not the backgroundColor
If you add both the stylesheets then the backgroundColor will not work.
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.css" />
<link rel="Stylesheet" type="text/css" href="/Content/fullcalendar/fullcalendar.print.css")" />
After removing the fullcalendar.print.css then the backgroundColor decided to render correctly.
Add the media attribute
<link href="../css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link media='print' href="../css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" />
I was setting it up in my bundle config in asp but that didn't add the media property so it was an issue.
The background color for events is defined in the fullcalendar.css file under the section
/* Global Event Styles
(Line 261, in version 2.0 beta)
You can access it programmatically like this:
$('.fc-event').css('background-color','#3a87ad');
Try to make it stick (change false parameter to true, at the end), probably a new event is overlapping and make it change properties.
"Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.", from Documentation, http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/
Here is how I did it: I placed backgroundColor in the chart event:
chart: {
type: 'column',
backgroundColor: 'transparent'
},
try this may be it works for you.
background: '#eeeef0
Do not write backgroundColor.