Offset when convert SVG to font with Glyphter.com - Offset - glyphicons

I created a simple SVG in Adobe Illustrator and then I save it as a SVG:
I then upload this SVG to glyphter.com and it looks perfectly centered:
I then drop the .svg file generated by the Glyphter download into fontello and I use it in my website but all the ones I generate are offset like this:
Does anyone know why the offset is there? Shouldn't it be cenetered?
I even tried making my SVG graphic save with artboards and i used artboards of height and width the same so its a square.

As mentioned in the comments, you can use FontForge for low-level control of the glyphs in almost any font.
FontForge is free: https://fontforge.github.io/en-US/
It can be installed on Windows, Mac OS X and GNU+Linux
You can manipulate individual glyphs, and perform bulk operations
When you're done editing your font, you can export it to almost any font-mime-type (ttf, otf, woff, svg, etc)
This is a good manual for installing and using FontForge:
http://designwithfontforge.com/en-US/index.html
The information you will probably need for this specific issue is here:
http://designwithfontforge.com/en-US/Spacing_Metrics_and_Kerning.html
Bulk centering all glyphs:
open the font you want to edit
to see all the relevant glyphs select Encoding -> Compact from the top menu
to select all the glyphs, press Ctrl+A on your keyboard, then
to center all the glyphs relatively, select Metrics -> Center in Width from the top-menu.
The following screen-shots illustrate the last 3 points in sequence - mentioned above:
When you're done, select File -> Generate Fonts from the top-menu and choose the font-type you want, choose the target folder, and hit Save.

Related

Replacing fonts in Powerpoint view does not replace font

I have a PowerPoint template. When this template was passed off It included some special fonts that I needed to remove because it was throwing warnings when users opened them up.
When I use the "replace fonts" feature it does not remove the font. I deal a lot with the XML properties of these templates because some of the content is generated dynamically when a report is run. I can still see in the slides the font is present
<a:buFont typeface="Poppins"/> the other is <a:buFont typeface="Noto Sans Symbols"/>
Which both appear to be bullet list fonts? There are no lists in the view though...
Removing it from the XML itself is not an option because when I update the template again it will override that and given that doesn't happen often I will have forgotten all about this. I need to fix this in the template so I can then export it out.
I have edited all the text I can see to either Ariel or Calibri but this Poppins font is still in there and I have no idea how to get it out.
Specifics are
Powerpoint version is 16.36
The program is actually Powerpoint for Mac (if that matters)
If anyone solved a similar issue and can give me some direction it would be much appreciated.
The buFont tag means that font is being used for a bullet rather than actual text. Probably a text level somewhere uses a custom bullet specced with this font. Each content or text placeholder can have up to 9 text levels, you may hove to create 9 levels using Home>Indent More to find the right one.
Start with the Slide Master (View>Slide Master>the larger thumbnail at the top). Then check each placeholder on each Layout (smaller thumbnails below the Master). Finally, check each multilevel placeholder on each slide, in case this was added with local formatting.
My go-to technique is to unzip the presentation into the XML files and do a find and replace on them. That's the quickest way to replace fonts, which can be tucked away in all kinds of obscure places in a presentation. On a Mac, this takes a bit of preparation to avoid problems caused by the OS. If you regularly create PowerPoint files, it may be worth it to set this up. Here's my article on this: OOXML Hacking: Editing in macOS. Look for the part about using a USB or network drive that is set to not create hidden .DS_Store files. Then use a text editor like BBEdit to do multi-file find and replace operations on the font name.
I have PowerPoint 16.39 on my MacBook Pro. Try to click on PowerPoint in the upper left. Then Preferences, then the Save icon. At the bottom you'll have Font Embedding. If you un-check this option, it should not save fonts to the template anymore.

Icons in setting menu may have unexpected vertical lines

We are running cobalt with openGL enabled, and the graphics appear to display correctly under 1920x1080 resolution.
But once in a while, some icons in the "Settings" menu may have unexpected vertical lines on top (as shown in the picture).
We are guessing the icons are created from TTF font file, but we are not sure how it is rendering onto the screen.
We want to dump the icons to file at the following points to check what went wrong.
When the icon is actually converted to image.
When the icon experience further modification. (eg, color change, bolding, etc)
When the icons are rendered onto screen canvas.
Would really appreciate if someone can help to point out where in source code these events may be happening.
I guess the first question is: are you running the stable branch or the experimental branch of Cobalt?
Beyond that, yes, the icons are created from a TTF font file that is downloaded remotely. The icon itself is simply a character that is converted into a glyph, like the text above it, albeit at a much larger size.
I believe that the logic that you're looking for is within RenderText() in cobalt/renderer/rasterizer/skia/render_tree_node_visitor.cc. SkCanvas::drawTextBlob() is passed the glyph and color information that it uses to render the icon.
The specific glyph that is being used looks correct, but the location where the render_tree::GlyphBuffer representing it is created is TextShaper::CreateGlyphBuffer() in cobalt/renderer/rasterizer/skia/text_shaper.cc.

Changing the text and background color of a PDF file

I'd like to change the background color and text color programmatically in PDF documents so that they're nicer to read at night (kinda like in Adobe Reader: Edit -> Preferences -> Accessibility -> Replace Document Colors).
Is there any good command line tool or API for Windows that can do that?
So far I haven't found any. It's OK if it needs to save the newly colored PDF into a new file.
There is no way to do this directly, with no (Free Software or gratis) tool I'm aware of. (Because in the general case, you'll have to change all colors of the PDF pages, not just the background alone, so you can still have some contrast and color differences.)
What you describe for Adobe Reader does not change the PDF file itself, it changes the way the application renders the pages (by inverting colors, or similar). The PDF remains the same during and after viewing it.
However, you might be able to achieve a similar thing by applying a suitable ICC color profile to the input PDF and produce, with the help of (a very recent version of) Ghostscript, a new output PDF from this.
The question would remain: what IS a "suitable" ICC color profil for your purpose??
I've shortly considered to apply a gray-ish background to the PDF with the help of pdftk ... background ... command line. But this would probably make some or many PDFs unreadable. (A black background would surely make it unreadable, because most text is black and would remain so.)
To create a PDF page (A4 size) which could serve as the gray background, you could use Ghostscript: gs -o gray.pdf -sDEVICE=pdfwrite -g5950x8420 -c ".8 setgray 0 0 595 842 rectfill showpage".
Then apply it to your original PDF (A4): pdftk original.pdf background gray.pdf output orig-with-backgr.pdf.
Note, this will only change the background of these pages (or those areas of pages), where the original background is transparent, as most text-based PDFs are. It will not work for pages or areas where the background is opaque white or color.)
You can also achieve a permanent color change (inverse colors) quite easily with the help of ImageMagick. But this will at the same time munch and make mincemeat of your nice vector PDFs, converting them into complete-raster image pages: convert nice.pdf -alpha off -invert inverted-colors-ugly-raster.pdf.
Finally, here is a rather unreliable way to accomplish the inverting of colors with the help of Ghostscript. It sets up a colortransfer function for the output PDF file:
gs -o output.pdf \
-sDEVICE=pdfwrite \
-c "{1 exch sub}{1 exch sub}{1 exch sub}{1 exch sub} setcolortransfer" \
-f input.pdf
It is unreliable, because not every PDF viewer will honor that setting. I've tested it a few times in the past...
These viewers DO SHOW inverted colors:
Adobe Reader
Adobe Acrobat
gv
Ghostscript/gs
Chrome's native PDF renderer ('pdfium')
These ones DON'T SHOW inverted colors:
Chrome with PDF.js
Firefox with PDF.js
Zathura
MuPDF
Just in case the OP doesn't really need to change the PDF document colors permanently, but only wants a PDF viewer other than Acrobat that can do similarly change the displayed colors...
MuPDF: MuPDF is a lightweight PDF viewer (amongst other things). It can invert the displayed colors with the simple stroke of the i for any document while it is open. MuPDF is also available for Windows (and iOS, and Android, and OSX, and Linux). (It is made by the same company which brought us Ghostscript).
MuPDF screenshots here: "normal" view (left) and "inverted" view (right)
SumatraPDF: This is a very popular alternative PDF viewer for Windows. Its PDF rendering engine is based on MuPDF. Hitting . in presentation mode, it changes background to black. Hitting w in presentation mode, it changes background to white. (I don't think it can also invert all colors, but I do not have the latest release available right now to check.) For startup adding -invert-colors to the command line, it will invert the colors for the rendered document.
Zathura: A lightweight PDF viewer for Linux and OSX, which can be controlled by Vim-like keyboard shortcuts. ctrl+r will re-color the rendering of any opened document. Background will change to dark, texts will change to bright gray (however it will not invert a, say blue text to yellow, like MuPDF does). I'm not sure if it is available on Windows too.
Evince: The Gnome PDF viewer, available for Linux, OSX and Windows. It can invert the colors of the open document too; the keyboard shortcut is ctrl+i.
XPDF: XPDF is quite an ancient PDF viewer for Unix + Linux (not sure if there is a Windows version available -- maybe in Cygwin). It has a startup option in its command line: xpdf -rv -papercolor "#333333" file.pdf will invert the colors (-rv is for reverse video, -papercolor lets you change the background to something different from pure black [as any inverted white would become]).
As you asked for an API, I'll throw one additional possibility in the mix. It is actually possible to write a plug-in for Adobe Acrobat (should be possible for Adobe Reader too, but Reader plug-ins are more difficult) that interferes with display.
A long time ago I wrote code for Enfocus PitStop to implement a wireframe rendering mode for PDF files inside of Adobe Acrobat. Click a button and the display changes to wireframe, click again and you have your normal view. This works because you can (as a plug-in) modify the display list (the list of objects) drawn by Acrobat.
This means that to draw your special display mode you could create a new display list (or modify the existing one) so that it has a rectangle at the very back in the color that you want and then modify the color of all objects in the display list to suit your needs.
This is relatively complex as it is, what makes it more complex is that - if you don't want your changes to affect the PDF file on disk, you have to intercept a myriad of Acrobat notifications and undo your changes. For example, if the user attempts to save the PDF document while viewing in your display mode, you have to make sure you are warned about that and undo the changes during the save. Adobe Acrobat makes this possible because it sends you notifications before and after the save process but it's still a serious job to make sure nothing gets screwed up.
But it's a absolutely cool and very flexible way to implement what you were after. Just make sure you have more than a couple of weeks to implement it :)
Install nodejs.
npm i -g serve
In directory with pdfs run: serve
Open http://localhost:5000 in Chrome and click on some file.
Install Chrome extension Dark Reader
Dark Reader > Toggle localhost:5000

Reduce size of a .png image without losing transparency

Basically, I'd like to resize or resample a .png image (in order to reduce its file size) and yet retain it's transparency.
Anybody got an idea how best to go about this?
Thanks.
You can use paint.net, it is a free tool. Although it is pretty basic, it does the job.
Go to Image > Resize
Stumbled upon this thread and found the following site that does exactly what is requested: https://onlinepngtools.com/resize-png
What graphics program are you using?
Photoshop does this by simply going thru IMAGE > IMAGE SIZE and resizing. Transparency is not affected.
I'm sure Paint Shop Pro does the same
I know this is an old question, but the answer that worked for me was to use Inkscape.
Start Inkscape (free on Inkscape.org).
File -> Import... (Ctrl+I) the PNG file you want to resize (defaults on import dialog are ok).
With the image you just imported selected, select File -> Export PNG image... (Shift+Ctrl+E)
In the Export PNG Image tool pane, click the Export As... button to set the output filename and location.
In this same tool pane, set the image size using width/height or pixels.
In this same tool pane, click the Export button to create the output file.
This worked for me, hope it helps someone else.
Providing the image you have created / have been working on is transparent in the first place, using the "Resize" or "Resample" tools in any major image editing package (e.g. PhotoShop, PaintShop Pro and so on) should not affect (or lose) the transparency at all.
I use PaintShop Pro (X6, 64 Bit) myself and typically find that the "PNG Optimizer" option offers more options along these lines (than the default "Save As > .png" route).
Hope that this helps (specific to PaintShop Pro Users) in relation to the source question.
While I was waiting for the downloads of other image editing softwares, I tried Microsoft Power Point and succeeded in preserving the transparency.
Drag the image inside any slide, crop or resize, then save as a new picture as .png.
You can drag the image back in ppt to confirm the transparency is maintained
The complete Autodesk Sketchbook is now out for free including all the previous premium features such as resizing an image.
You do it as you would in paint by clicking on Image > Image Size... and then you can save as a .png without losing transparency.
Image size can be reduced by reducing number of colors and there are online tools to do this .
Try these..Hope they solve your problem
https://tinypng.com/‎
http://pngcrush.com/ and
http://tools.dynamicdrive.com/imageoptimizer/ --It provides more output images with different number of colors. However, smoothness will be effected, take care.

How to change the Icon of a MFC-Application without changing each sub-image?

when I open the application icon of a MFC-project with Visual Studio 2008 there are 13 images (different sizes, different color palette). How would you change the icon of your MFC-application without changing each image?
Thanks!
I like to use the Icons file type extension with Paint.NET. When you open a .ICO file it will prompt you for which image to open - select only the largest / highest-bit image. Make your changes, and then save. You will be prompted for which sizes and bitness to save - select the same list that was present in the original icon.
Using this method, you will get automatically scaled and dithered icons at the smaller sizes. A designer would actually tweak the icons at each size to get the best look, but for most applications this technique produces something that is usable.
An icon resource typically contains many different versions of an icon. For an application icon you would expect 16x16, 32x32, 48x48 and 256x256. You'd also expect to see the 3 smaller ones at 32 bit colour, 8 bit colour 4 bit colour. Or some variant on that. Microsoft publishes guidelines.
Why so many different versions of the same icon?
Well, the icon will be drawn in different settings. On a window caption bar, the 16px version will typically be shown. On the Windows 7 taskbar the 48px version will be shown. When usint ALT+TAB in XP the 32px will be shown. In Vista/7 explorer with ultra large icon view, the 256px will be shown.
To obtain the best visual appearance you must have different versions of the image for different sizes because small raster images aren't easy to scale. What's more, you may present a slightly different version of the icon at different resolutions. For example you may use 3D effects only on larger resolution, partial transparency versions.
When using remote desktop, lower colour depths may be used if the connection is bandwidth challenged.
The MS guidelines go into these issues in detail.
The normal practice of for the graphic designer to design the icon and once you are happy with it the designer will produce rasterised versions for all the required sizes and colour depths, typically in a single .ico file.

Resources