We Keep Coding

How can I import font with JavaScript?

I want to change the typeface of a blotter.js animation.
Right now, I can just use the standard-typefaces. What I want to achieve is to use the typeface, that matches the whole design.
I tried to import it as a const. But it's still either displayed with the default typeface or the typo get's really buggy.
`
const timmonsNy = new FontFace("timmonsNy", "url(./typefaces/TIMMONSNY2.0-Regular.woff2)", {});
document.fonts.add(timmonsNy);
let text = new Blotter.Text("404", {
family: timmonsNy,
size: 375,
fill: "#000",
paddingLeft: 80,
paddingRight: 80,
paddingTop: 50,
paddingBottom: 50,
})
`

Text height of specific character in Fabric.js

I have a text object in fabric.js that I am creating with:
fbText = new fabric.Textbox('#TEST', {
width: 700,
fill: '#303846',
top: 150,
left: 50,
fontSize: 150,
textAlign: 'left',
fixedWidth: 700,
// fontWeight: 'bold',
editable: false,
originY: 'center',
styles: {
// first word of text i.e Test
0: {
//first letter of first word i.e T
0: { fill: '#21bba6', fontSize: 130}
},
}
})
I would like to make the 1st letter higher than the rest of the word. Any thoughts on how that might be possible?
This is what I want to happen:
This is currently happening:

You can use deltaY negative value. There are more available style properties that can be used, have a look at [http://fabricjs.com/docs/fabric.Textbox.html#_styleProperties][1].
var fbText = new fabric.Textbox('#TEST', {
...,
styles: {
0: {
0: {
fill: '#21bba6',
fontSize: 130,
deltaY: -30
}
},
}
})

FabricJS - Why after updating text inside group, the group width does not automatically adjust its width accordingly

Seen Behavior
I have an issue with updating canvas elements inside a group after initialization.
I created a basic app that on initialization creates a group containing several elements: font icon(text object), title, description and rect in order to create a border for the group.
Is there any way to solve this problem that dosen't require me to remove and re add the group back to the canvas?
after reading faricjs documentation canvas.renderAll should be enough what am i missing?
Expected Behavior
The Group object that is rendered to the DOM needs to adjust its width according to the new width of the text object in the DOM.
Essentially re-render this individual group object without causing a full re-render of all the other objects in the canvas.
Issue Reproduction Demo
I was able to reproduce the issue here: http://jsfiddle.net/almogKashany/k6f758nm/
Using setTimeout I update the title of the group but the title of the group does not update (even after calling group.setCoords or canvas.renderAll)
SOLUTION
Thanks to #Durga
http://jsfiddle.net/gyfxckzp/

Call addWithUpdate after changing width of rect or text value, so it will recalculate the group dimension.
DEMO
var canvas = new fabric.StaticCanvas('c', {
renderOnAddRemove: false
});
var leftBoxIconWidth = 70;
var placeholderForIcon = new fabric.Text('ICON', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: 10,
top: 20,
originX: 'left',
lineHeight: '1',
width: 50,
height: 30,
backgroundColor: 'brown'
});
var title = new fabric.Text('', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: leftBoxIconWidth,
top: 5,
originX: 'left',
lineHeight: '1',
});
var description = new fabric.Text('', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: leftBoxIconWidth,
top: 25,
originX: 'left',
lineHeight: '1',
});
title.set({
text: 'init title'
});
description.set({
text: 'init description'
});
var groupRect = new fabric.Rect({
left: 0,
top: 0,
width: Math.max(title.width, description.width) + leftBoxIconWidth, // 70 is placeholder for icon
height: 70,
strokeWidth: 3,
stroke: '#f44336',
fill: '#999',
originX: 'left',
originY: 'top',
rx: 7,
ry: 7,
})
let card = new fabric.Group([groupRect, title, description, placeholderForIcon]);
canvas.add(card);
canvas.requestRenderAll();
setTimeout(function() {
title.set({
text: 'change title after first render and more a lot text text text text'
});
groupRect.set({
width: Math.max(title.width, description.width) + leftBoxIconWidth
})
card.addWithUpdate();
// here missing how to update group/rect inside group width after title changed
// to update canvas well
canvas.requestRenderAll();
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

How to use fontStyle on IOS? (with React-Native)

I am trying to use the writing styles "bold", "italic" on IOS, but I encounter the following error:
Invalid RCTFontStyle 'bold'. should be one of: (
italic,
normal,
oblique
)
What I should change to no longer have an error when I build on IOS?
I don't understand because on android when i use fontStyle: 'bold', I don't have the error and everything is working properly. I am novice, any help and simple explanations would be very appreciated.

Just use fontWeight instead.
fontWeight: 'bold'
or
fontWeight: 500;

fontWeight should be the correct prop to apply bold styling.
fontStyle: enum('normal', 'italic')
fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
see documentation.

Titanium ScrollView Not Displaying UI Properly

So this is my code:
var startWeekWin = Ti.UI.createWindow({
title:'Startup Weekend',
layout: 'vertical',
backgroundColor:'#b6e2e2'
});
// create scroll view here
var sv = Ti.UI.createScrollView({
contentWidth:'auto',
contentHeight: 'auto',
top: 0,
showVerticalScrollIndicator: true
});
startWeekWin.add(sv);
var lblPicture = Ti.UI.createLabel({
top: 0,
width: 'fill',
height: 100,
backgroundImage: 'images/StartUpWeekend.png'
});
var lblTitle = Ti.UI.createLabel({
top: 15,
left: 15,
right: 15,
height: '15%',
font: {
fontSize: 24,
fontWeight: "bold",
fontFamily: "Helvetica"
},
text: "What is it?",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});
var lblText = Ti.UI.createLabel({
top: 30,
left: 15,
right: 15,
height: 70,
font: {
fontSize: 16,
fontFamily: "Helvetica",
},
text: "Etsy doostang zoodles disqus groupon " +
"greplin oooj voxy " +
"zoodles, weebly ning heekya " +
"handango imeem plugg",
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});
var lblDate = Ti.UI.createLabel({
top: 30,
width: 'fill',
height: 50,
font: {
fontSize: 24,
fontWeight: "normal",
fontFamily: "Helvetica",
fontStyle: "italic"
},
text: " January 23-25, 2015",
color: '#0a3f56',
backgroundColor: '#b6e2e2'
});
// video trailer goes here
var trailer = Ti.UI.createLabel({
top: 35,
width: 'fill',
height: 50,
text: 'Trailer Goes Here',
color: '#1d1d1d',
backgroundColor: '#b6e2e2'
});
// learn more button
var learnMoreButton = Ti.UI.createButton({
top: 40,
left: 40,
right: 40,
width: 180,
height: 50,
title: 'Learn More',
font: {
fontSize: 18,
fontFamily: "Helvetica",
fontWeight: "normal"
},
color: '#0a3f56',
backgroundColor: 'white'
});
sv.add(lblPicture);
sv.add(lblTitle);
sv.add(lblText);
sv.add(lblDate);
sv.add(trailer);
sv.add(learnMoreButton);
And this is what it displays: http://imgur.com/t4AQTMJ
I don't understand why everything is stacking on top of each other.
Could someone point out what I'm missing?
Thanks.

There is many way to build the UI That you want.
First you given all child element of sv(scroll view) to top. Every child element take top from the SV start position.
If you want to give top to every child element of sv then apply layout vertical property to scroll view.
And second way is give top after the end of first element.
every one is taking top from the scroll view so they all are over riding on every one,
First apply first way and let me know if face any difficulty in this.
Not using layout style will give it a property similar position:absolute of HTML.
Not using layout is at times good as it helps in centering the view.

The Issue is with the top that you have given to every element. As all elements have top that is coming over other elements. If you will update the top your layout will be fixed.