I'm a beginner starting out with integrating Gitbooks and Github, and I was having issues trying to increase the font size of the caption of an image. It's too small for my liking, and I've been looking at the code in Github and how to edit it such that I can increase the font size of the caption text. (The caption in question is "Chemistry")
<figure><img src=".gitbook/assets/IMG_0948.jpg" alt=""><figcaption><p>Chemistry</p></figcaption></figure>
I've tried rewriting using html syntax for increasing font size, but it didn't quite work out.
<font size="+5">Chemistry.</font>
Are there any suggestions that folks could give? Thanks! Also for more general resources on this sort of integration between Github and Gitbooks would be really appreciated as well!
Related
I am using OpenType.js to generate SVG from strings, by default the alignment is set to left, which works most of the time, but occasionally I have some texts that need to be center/right aligned.
I checked the web and there is very little on this subject, so I was wondering if anyone has ever looked into this in the past and can give me a hint on how I can get center/right alignment.
EDIT
I ended up using fabric js to achieve the above.
Thanks for reading this question :)
Goal:
I am using Fabric.js as a base for image editor (crop and resize features for now mostly).
My goal is to load some high-quality image (like photos) rotate or crop it and then export as DataURL (in original quality or near to it).
Solution:
To add such a big photo on canvas and be able to export it bad with the same quality - I set width and height of canvas equal to image's width and height (2560 × 1600px) and then compress it using css to 640x400px (editor size). (I used https://stackoverflow.com/a/17035046 as a base)
In this case I still can export image in big dimension using canvas.toDataURL() - it will be about 2560x1600 (this is my goal).
How it works: http://jsfiddle.net/handmade/Lqsb0kwv/4/
Problem description:
I've got a problem after adding zoom feature (canvas.zoomToPoint(...)) to my editor and it is related to css width and height limitation of canvas.
Try to change size of image using controls in jsfiddle above and you will see an issue.
Works fine if...
...if I don't use css limitation: http://jsfiddle.net/handmade/Lqsb0kwv/5/
Questions:
I've read 90% of Fabric.js docs, examples, tutorials, questions here on Stack Overflow, but I didn't find a solution for my issue.
I am not sure that using css to limit canvas is a good practice.
I am not sure that my way of getting back changed image in big dimension is a good way.
Does anybody know better way to export image in good dimension?
Does anybody know if issue with scaling/rotating image after zoom (+limited by css) is a bug in Fabric.js?
Thank you for any answer!
I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
The website I am creating has a fairly large title text for its banner. Using a plain font gives it a very jagged look, but it seems like an anti-aliased image would be a fairly large download. Which way would be the best choice, or is there a better method for large titles?
Here is the banner with pure text. Scaled down it is not as noticeable, but full size it's about 600px across. Open the image separately for the full effect:
Some fonts are better than others where the jaggies are concerned. That being said, a no-displacement text shadow the same color as the text with a blur of one pixel will cure what ails ya most of the time:
h1 {
.
.
.
color: white;
text-shadow: 0 0 1px white;
}
I've found that it's just enough to antialias the font, and if I'm not using the text-shadow for any other effects, it's a good solution for anything even reasonably modern. Older browsers (you know who you are) will get the jaggies, but you can't win 'em all.
Image is the way i would go. There are techniques out there for making the image smaller in size without giving up too much in terms of quality. Plus, once it's downloaded the first time, it can be cached so it won't need downloaded again.
I would always advise against using images for text content. Modern browsers have built-in anti-aliasing capabilities, so large fonts look much better than they did a few years back. (And it's getting better by the day.) Also, using markup such as <h1> allows you to retain the semantic value of your title, which is lost when you use an <img> tag or a CSS background-image.
When the width of the brower is changed, the image's width or height is also changed dynamically, anyone knows how to do it?
And I found the image's max height of each rows is not the same.
Thank you very much.
I am sure Google's image application is a little more complicated than can be written in a single post, but you could mimic some of the effect with some clever use of jQuery. Here's a quick tutorial on a resizeable image grid using a slider -
Image resize tutorial
You would need to change the trigger from a slider to the resize event, but this has the basics you need.