We have been provided with a Photoshop created specification for a website. It gives specific pixel-based panel widths and various font sizes for different items (in points).
For example, the text in a data grid is 12pt Verdana. The grid is 765px wide.
When rendered in a browser (Chrome or IE) at 100%, the grid is 765px as expected, but the font appears larger than the design (around 20-25% larger in the browser).
We suspected the DPI settings in Photoshop might be a cause, but if anything they should have had the opposite effect (Photoshop doc set to 72DPI, Windows/browsers rendering at 96DPI).
Any suggestions on what we are overlooking? Should the Photoshop file be authored at 96DPI?
Here is another discussion about pt vs px in photoshop and how you can change to px instead. Maybe it helps :)
https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web
Make sure your photoshop document is set to 72ppi, then it will match browser size
Under CS2 its a simple process of going into the Edit Menu -> Preferences Submenu -> Units and Rulers then change the units type to pixels.
Related
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
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.
I draw some text on screen using ID3DXFont::DrawText. This text should be displayed the same regardless of screen resolution.
For example, if screen resolution is low, text wrapped and when it is higher text is not wrapped. How can I avoid such situation? I want text size to be connected to screen resolution so if resolution is lower I want the text to be relatively smaller so that no wrapping happens. Is there any way?
Thanks in advance
Below is a logical solution. It doesn't have any of the code or procedures needed to make work in direct X but having done something similar outside of DirectX I wanted to share the logic
Working on whatever default screen resolution you want set the font to be the size needed.
Find the percentage of the screen height the font size you chose takes up.
Then having stored that value when you go to render again, in the final version of the program, calculate the font size based on the screen size and the percentage
What I was working in had functions like GetTextHeight and properties on the font size to allow you to set the height (which in turn set the font size appropriately). So if can find anything similar to this in DirectX than this could be a route for you to take.
I created a set of svg glyphs for a font I am building, in Inkscape.
They look fine in Inkscape, and fill the full canvas. But when I import them into FontForge, they appear tiny - around 1/10th of the size they should take up.
Can anyone explain why this is happening, and what I can do to fix it?
This happens because your artboard in inkscape has many more units than the font's cartesian grid space.
Open Inkscape
From the File menu, select Document Properties.
Set units to pixels (px) and document dimensions to 1000 x 1000, click OK
Set a horizontal guide at 200px
Draw a glyph – the hardest part! :-)
Save the drawing as an SVG
Open FontForge
From the File menu, select Import, chose SVG, find your drawing, click OK
Inkscape now has a template, 'FontForge Glyph' that should make this more convenient.
There are some bugs in the FontForge.This is a way to solve it.
Is there any program that can convert a file into an animated gif by taking the bytes (whatever I see on an editor is seen) and producing them on frames? Im trying to change a large script I wrote into an image so that if I run it, it looks like as if the code is scrolling. I would use photoshop, if I knew how to use it. Even then, the code is really big, so I dont want to be doing it frame by frame.
Whatever you see on the editor screen is ... a screenfull, so why not a screen capture program like http://www.faststone.org/FSCaptureDetail.htm
However, I suspect that you want to convert the entire file to a gif, since you talk of scrolling. Is that so?
If so, be aware that animated GIFs are limited to 8 frames, so you might want to convert to another movie format.
You could, for instance, Google for "text to MPEG". If nothing does it directly, get something that adds subtitles & make your video a solid white background *or match your webpage).
Maybe simpler is something like this ...
A Scrolling Text Applet - Now Free. - Provide an animated look and feel to your web pages. Scrolling Text is a Java applet that will automatically size itself to the available area given to it by the HTML form via the WIDTH and HEIGHT properties of the APPLET tag. There are many configurable features of this applet including title, colors, font size and style, border width and color, graphics, background images etc.
Configurable parameters including;
Background Color - Define your desired background color
Title - If you want a stationary title then include this parameter
Font Size and Style - All text can have it's own Font size and style
Text Color - Specify the color of the text with this one
Border Width and Color - If you require a border then define it with these 2 parameters
Scroll Speed - Customise the Scroll Speed
Display Time - Vary the Display time of each page
This applet is easy to implement and configure and along with the example and help files you should have no trouble implementing your own customised Scrolling Text in your web pages. No understanding of java programming is required, everything is adjusted by parameters in the HTML tags.
Now FREE.
+1 for an interesting question.