[FIXED] What is the vertical equivalent of CSS font-kerning?

Issue

I have a font that is misaligned since the baseline is below y, g, j, etc. as opposed to regular baseline.

I've tried messing around with a few properties (line-height, height, display: inline-block, vertical-align: text-top) but can't get the font as far centered as it should be.

Is there a CSS equivalent of kerning, but in a vertical direction? Is there another way to uniformly fix this font via CSS?

Solution

This is a very old question, but the solution I ended up using (as with most CSS) was to create a wrapper and pad asymmetrically, therefore raising the apparent baseline.

The main use-case was with headers with large border-radius causing slight (visual) vertical mis-alignment.

Answered By - neaumusic

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to remove the unwanted jagged aliasing in Arial/Times Font for "writing-mode: vertical-rl & transform: rotate(180deg)"?

Issue

Given some vertical text as part of a sideways navigation using simply and only:

writing-mode: vertical-rl;
transform: rotate(180deg);

However, on both Chrome & Firefox, on both of my standard fontfaces used Arial & Times News Roman text becomes jagged aliased and has a wrong letterspacing.

I have discovered that by adding 0.1 to the degrees this "solves" the aliasing and renders the font beautifully and faithfully without any jagged aliasing:

transform: rotate(180.1deg);

However, this adds a slanted tilt and an extra pixel to the right of the menu items, long story short: it is not a(n elegant) solution to my problem and creates new problems.

Is there another (more elegant) way to get rid of the jagged aliasing introduced by the combination of vertical-rl and rotate(180deg)?

---

Arial/Times, 180degrees, straight but jagged and aliased.
Notice also how the letter spacing looks incorrect!

---

Arial/Times, 180.1degrees, no jagged aliasing and a correct spacing between letters.
But everything is slanted and tilted which is unwanted:

---

Demo

https://jsfiddle.net/8Lrv5epw/

Solution

I think i found a solution to solve this problem. You need a box-sizing property with a value of border-box.

*,
::after,
::before {
  box-sizing: border-box; 
}

nav {
  height: auto;
  font-family: 'Arial';
  letter-spacing: 0.5px;
  font-size: 1.2em; /* was 1em */
  display: block;
  width: 100%;
}
nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  transform: scale(0.8); /* scale down */
  transform: rotate(180deg);
}

*,
::after,
::before {
  box-sizing: border-box;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  height: auto;
  font-family: "Arial";
  letter-spacing: 0.5px;
  font-size: 1.2em;
  display: block;
  width: 100%;
}

nav li {
  writing-mode: vertical-rl;
  background: blue;
  padding: 0em;
  border-top: 1px solid white;
}

nav li:first-of-type {
  border-top: none
}

nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5em 1em;
  text-align: center;
  transform: scale(0.8);
  transform: rotate(180deg);
  /* transform: rotate(180.1deg); */
}

nav li.selected,
nav li.selected a {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li class="selected"><a href="#">Initiatief</a></li>
    <li><a href="#">Dienst</a></li>
    <li><a href="#">Ontwerp</a></li>
    <li><a href="#">Concept</a></li>
    <li><a href="#">Oeuvre</a></li>
  </ul>
</nav>

Answered By - Anton

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to access the font programmatically

Issue

I'm trying to access to a font programmatically, because i cant install fonts on the sharing hosting

I use this code

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    Dim collection As New PrivateFontCollection()
    collection.AddFontFile(Server.MapPath("~\ShadowsIntoLight.ttf"))

    Dim image As New Bitmap(500, 500)
    Dim g As Graphics = Graphics.FromImage(image)

    Dim RedBrush As New SolidBrush(Color.Black)
    Dim drawFont As New Font("Shadows Into Light", 36)

    g.DrawString("the lazy fox jumped over the brown log", drawFont, RedBrush, 0, 100)

    Dim path As String = Server.MapPath("~/image.png")
    image.Save(path, ImageFormat.Png)
    g.Dispose()
    image.Dispose()

    Response.Write("<img src=""image.png""/>")

End Sub

but it always displays the Arial font. How can I make it display the specific font

Thank you

Solution

Could you not use CSS in the background? Add the custom font to your solution in a 'Fonts folder' > add existing item to fonts folder in visual studio

Example: (Using a random font I downloaded)

@font-face{
font-family: myFont;
src: url(/Fonts/Belleza-Regular.ttf);

}

.MyClass{
color:green;
font-family: myFont;
 }

Then append this font anywhere within your code?

myControl.CssClass = "MyClass" etc..

Might be a slightly longer way than you wanted and would only work if you're appending to controls and such however might be a nice workaround.

Edit:

maybe something like this? Using custom TTF font for DrawString image rendering

Answered By - dan6657

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] How to render text using a font and access raw pixel data (in Node.js)

Issue

Is there any way to render a text using an existing font and access the raw pixel data in Node.js? I am trying to implement a VideoRenderer for the (kinda ancient) CD+G format. In this format there is no instruction to just render text. You have to render 6x12 pixel tiles by a providing the raw pixel data. Currently I'm using some code I found on the internet which contains the raw bytes for ASCII characters of a monospaced font called "Terminus". Please note that I am not in a browser context. I'd be happy for any hint, even if it's not directly linked to Node.js (e.g. some solutions in C, PHP or Python).

My inspiration: https://goughlui.com/2019/03/31/tech-flashback-the-cdgraphics-format-cdg/

Solution

Okay, I found the answer by myself. It took a look into Bitmap fonts (file extension .bdf). It turned out parsing the font files is extremely easy. For each character they contain the code point and a bitmap which provides the required pixel data. If anyone knows how the same is possible with other font format (TrueType or OpenType), feel free to share your knowledge.

Answered By - Marius

Answer Checked By - David Goodson (PHPFixing Volunteer)

Read More

[FIXED] How do I add a Google Font to a VueJS Component?

Issue

I've been trying for an hour to find a way to import a Google Font into a VueJS Component, but I cannot seem to find a solution, nothing worked yet, not even the stuff from previous StackOverflow questions. All the answers I've found are 1.5 to 2 years old now. I would appreciate it greatly if someone could suggest an up to date solution.

I am using VueJS2 + Webpack + Vue-cli

Solution

The fastest way is to import the font in a CSS file, for example App.css, if all components should have it:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto', sans-serif;
}

#app {
  font-family: 'Roboto', sans-serif;
}

The import statement is also shown by Google Fonts.

Select your fonts, click on Embed and then @import at the selection window:

Answered By - Bennett Dams

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How do I block or substitute a certain font in Firefox?

Issue

I have Helvetica installed on my Windows XP PC, which is great for designing, but Helvetica looks horrendous when displayed in a browser on PC.

For example, I visit a website with this style:

font-family: Helvetica, Arial, sans-serif;

Helvetica is selected, as it is installed on my system.

Can I force Firefox to pretend Helvetica isn't installed on my system, and render these pages using Arial?

Solution

The other day I came across a site that used Comic Sans, and I decided I wanted to replace it with Verdana. I did some googling and found this Greasemonkey script which removes Comic Sans from any website you visit. I rewrote that script to replace Helvetica with Arial

var tags = document.getElementsByTagName('*');
for (var i in tags) {
    var style = getComputedStyle(tags[i], '');
    if (style.fontFamily.match(/helvetica/i)) {
        var fonts = style.fontFamily.split(',');
        for (var j in fonts) {
            if (fonts[j].match(/helvetica/i)) {
                fonts[j] = 'arial';
            }
        }
        tags[i].style.fontFamily = fonts.join(',');
    }
}

Answered By - Rob

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How Can I Load My Custom Font in imagestring()?

Issue

My problem is Q title.

I tried http://www.php.net/manual/en/function.imageloadfont.php and: imageloadfont();

but i do not see any change and i get error:

Warning: imageloadfont(): gd warning: product of memory allocation multiplication would exceed INT_MAX, failing operation gracefully in E:\xampp\htdocs\test\texts\text01.php on line 3

Warning: imageloadfont(): Error reading font, invalid font header in E:\xampp\htdocs\test\texts\text01.php on line 3

Edit: My font.

Solution

To quote myself, you should be using imagettftext(), not imagestring().

Example usage, abbreviated/adapted from the manual page:

$im = imagecreatetruecolor(400, 30);

// Create some colors and set background to white.
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'btitr.ttf';

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im, 'path_to_file.png');
imagedestroy($im);

Answered By - timclutton

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to account for font swash with PHP and GD

Issue

I have the following code to print text on an image. I am also adding a debug box around the text. However, I noticed the text on the left lies outside of the box that PHP gives me with imagettfbbox.

This looks like an issue with the font swash. Is there anyway to account for this? Can I figure out the distance between the start of the swash and the actual position imagettfbbox gives to me?

I don't think this is an issue with the font, as I tried it with a few script style fonts and the results were similar.

<?php

$font       = 'scriptin.ttf';
$text       = 'Ipsum';
$size       = 30;
$image      = imagecreatetruecolor(200, 200);
$fontColour = imagecolorallocate($image, hexdec('11'), hexdec('11'), hexdec('11'));
$bgColour   = imagecolorallocate($image, hexdec('CC'), hexdec('CC'), hexdec('CC'));

imagefilledrectangle($image, 0, 0, 200, 200, $bgColour);

$dimensions = imagettfbbox($size, 0, $font, $text);
imagefilledrectangle(
    $image,
    $dimensions[0] + 40,
    $dimensions[7] + 50,
    $dimensions[2] + 40,
    $dimensions[3] + 50,
    imagecolorallocate($image, mt_rand(1, 180), mt_rand(1, 180), mt_rand(1, 180))
);

imagettftext(
    $image,
    $size,
    0,
    40,
    50,
    $fontColour,
    $font,
    $text
);

header('Content-Type: image/png');
imagepng($image);

The code and font is available here: https://github.com/AydinHassan/image-swash-example

If you point a VHOST at the repository, you can just hit swash.php

Solution

Edit: This appears to be fixed in PHP 7.0.12 (bug #53504) so the code below shouldn't be required.

---

Based on a comment in the PHP manual I've written the following function to calculate and return the difference between where GD thinks the left side of the bounding box is and where the leftmost pixel is found:

function xadjust($size, $angle, $fontfile, $text)
{
    $bbox = imagettfbbox($size, $angle, $fontfile, $text);

    $width = $bbox[4] - $bbox[6]; // upper right x - upper left x;
    $height = $bbox[1] - $bbox[7]; // lower left y - upper left y;

    // create an image with height and width doubled to fit any 'swash'.
    $im = imagecreatetruecolor($width * 2, $height * 2);

    // set background color to opaque black.
    imagefill($im, 0, 0, 0x00000000);

    // draw the text in opaque white.
    imagettftext(
        $im,
        $size,
        0,
        $width / 2,
        $height,
        0x00ffffff,
        $fontfile,
        $text
    );

    // set the min-width to its possible maximum.
    $min_x = $width * 2;

    for ($x = 0; $x < $width * 2; $x++) {
        // each x-pixel (horizontal)
        for ($y = 0; $y < $height * 2; $y++) {
            // each y-pixel (vertical)
            if (imagecolorat($im, $x, $y) > 0) {
                // non-black pixel found!
                $min_x = min($x, $min_x);
            }
        }
    }

    imagedestroy($im);

    // return the difference between where GD thinks the bounding box is and
    // where we found the leftmost non-black pixel.
    return (($width / 2) - $min_x) - abs($bbox[0]);
}

This can be integrated to your script fairly easily:

$font       = 'scriptin.ttf';
$text       = 'Ipsum';
$size       = 30;
$image      = imagecreatetruecolor(200, 200);
$fontColour = imagecolorallocate($image, hexdec('11'), hexdec('11'), hexdec('11'));
$bgColour   = imagecolorallocate($image, hexdec('CC'), hexdec('CC'), hexdec('CC'));

imagefilledrectangle($image, 0, 0, 200, 200, $bgColour);

$xadjust = xadjust($size, 0, $font, $text); // 1. get the adjust value.

$dimensions = imagettfbbox($size, 0, $font, $text);
imagefilledrectangle(
    $image,
    $dimensions[0] + 40 - $xadjust, // 2. move the left-side of the box to the left.
    $dimensions[7] + 50,
    $dimensions[2] + 40 - $xadjust, // 3. move the right-side of the box to the left.
    $dimensions[3] + 50,
    imagecolorallocate($image, mt_rand(1, 180), mt_rand(1, 180), mt_rand(1, 180))
);

imagettftext(
    $image,
    $size,
    0,
    40,
    50,
    $fontColour,
    $font,
    $text
);

header('Content-Type: image/png');
imagepng($image);

This gives me the following output:

I've run it with a few other fonts and sizes and it seems to be accurate to within 1 pixel.

Answered By - timclutton

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] Where can I find GD compatible fonts?

Issue

I'm using GD to display some text. The default font is Courier (or something similar)... I want to use another font and I found this function: imageloadfont that requires a .gdf file. I've search on Google to see if I find some nice fonts, but I didn't find anything. I see there's a script to convert a PNG file to a GDF, but I can't waste too much time so I'd like to know where can I get some nice fonts, or maybe there's another easier way to do what I want.

Solution

I hadn't seen the imagettftext function in the documentation. Thanks @Pekka for the advice. Finally I just copied the consolas.ttf file in the same directory of the script and did:

imagettftext ( $image, 12, 0, 200, 100, 0, 'consolas.ttf' , "thanks!");

It works perfectly.

Answered By - Cristian

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to handle tvOS fonts SpriteKit

Issue

How do you guys handle converting your iOS games to tvOS in regards to fonts?

tvOS hardly supports any fonts available on iOS and therefore my game menus etc just look plain and boring on the appleTV.

I understand that Apple wants to use SanFrancisco style fonts for apps for legibility, which makes sense. For Spritekit games however those fonts dont look good at all, especially when having cartoonish style artdesign.

Is there any trick to get fonts such as Chalkduster, Damascus etc to work on tvOS in code without having to resort do do all the menus in Photoshop just for the appleTV.

Am I missing something?

Solution

As Daniel Storm so kindly pointed out to use custom fonts beyond the supported ones I can follow this stack overflow question

How to add custom fonts to an iPhone app?

Answered By - crashoverride777

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] How to use custom font in a tvOS project using SwiftUI?

Issue

I made an App for iOS and MacOS and I am now working on the tvOS version. The issue I am facing is that the custom font is not working when I use the following code for tvOS!

import SwiftUI

struct TestView: View {
    var body: some View {
      Text("R")
      .font(.custom("Arial Rounded MT Bold", size: 160))
      .bold()
      .shadow(color: Color.black, radius: 15, x: 15, y: 5)
      .foregroundColor(Color(red: 255 / 255.0, green: 194 / 255.0, blue: 58 / 255.0))
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

The wrong result with the above code is the below letter:

The good letter that should be displayed by the above code should look like the one below:

What am I missing? Thanks

Solution

You are right that works for iOS & macOS but doesn't work for tvOS. Maybe because there are different built-in fonts available for iOS and tvOS? I don't have expertise in tvOS, so please don't assume I'm right. I'm guessing it from this available font list.

tvOS: Try something from this list, and I'm sure it'll work.

iOS:

Answered By - Harshil Patel

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] Why does the calculated width and height in pixel of a string in Tkinter differ between platforms?

Issue

I have a Python script which needs to calculate the exact size of arbitrary strings displayed in arbitrary fonts in order to generate simple diagrams. I can easily do it with Tkinter.

import Tkinter as tk
import tkFont
root = tk.Tk()
canvas = tk.Canvas(root, width=300, height=200)
canvas.pack()
(x,y) = (5,5)
text = "yellow world"
fonts = []
for (family,size) in [("times",12),("times",24)]:
    font = tkFont.Font(family=family, size=size)
    (w,h) = (font.measure(text),font.metrics("linespace"))
    print "%s %s: (%s,%s)" % (family,size,w,h)
    canvas.create_rectangle(x,y,x+w,y+h)
    canvas.create_text(x,y,text=text,font=font,anchor=tk.NW)
    fonts.append(font) # save object from garbage collecting
    y += h+5
tk.mainloop()

The results seem to depend on the version of Python and/or the system:

Python 2.5 Mac 0S X, times 12: (63,12), times 24: (128,24). Python 2.6 Mac OS X, times 12: (64,14), times 24: (127,27). Python 2.6 Windows XP, times 12: (78,19), times 24: (169,36) http://grab.by/grabs/d24a5035cce0d8032ea4e04cb8c85959.png

After Ned Batchelder mentioned it, I discovered that the size of fonts differs from platform to platform. It may not be a deal breaker as long as you stick with Tkinter, which remains consistent with itself. But my complete program does not use Tkinter to perform the actual drawing: it just relies on its font size calculations to generate an output (in SVG or as a Python script to be sent to Nodebox). And it's there that things go really wrong:

Output of mocodo http://grab.by/grabs/f67b951d092dd1f4f490e1469a53bca2.png

(Please look at the image in real size. Note that the main font used for these outputs is not Times, but Trebuchet MS.)

I now suspect that such discrepancies can't be avoided with Tkinter. Which other cross-platform solution would you recommend?

Solution

You have two problems. Let's tackle them one at a time

1: the difference between python 2.5 and 2.6 on the same platform with the same font

These two versions of python use different versions of tk. On my mac box, 2.5 uses tk version 8.4.19 and 2.6 uses 8.5.7. In version 8.5.2 of tk were some changes to the font measurement features of tk. Assuming that the changes were improvements, I think it's safe to assume that the numbers you get from python 2.6 are more accurate than the ones from 2.5.

2: the difference between python 2.6 on the mac and 2.6 on the PC.

Obviously, from the screenshots you include, the PC is using a larger font and thus you get larger numbers for the measurement. The question is, why? You are specifying the font size in points (1/72 of an inch). In order for Tk (or any rendering system) to render the font, it needs to know how many pixels are in an inch on the actual display. This will vary on different systems, and Tk isn't always given an accurate number by the underlying OS in order to do its calculations.

Historically, Apple and Microsoft have standardized on 72ppi and 96ppi regardless of the actual display, so the numbers are always going to be different. For more information about the differences in how the mac and windows calculate pixel density see the Dots Per Inch article on wikipedia.

You might try solving this by specifying a font in pixels rather than in points. You can do this by using negative numbers for the font size.

Finally, one thing you might add to your little example code is to print out the result of the font.actual() command -- you might see something different between your windows and mac boxes, which would explain the differences there. This tells you exactly which font is being used by Tk.

Answered By - Bryan Oakley

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How to add custom font in shopify site

Issue

I have added font code

    @font-face {   font-family: 'Gotham-Book';   src:url('{{ "Gotham-Book.eot" | asset_url }}');   src:url('{{ "Gotham-Book.eot"
    | asset_url }}#iefix') format('embedded-opentype'),
    url('{{ "Gotham-Book.woff" | asset_url }}') format('woff'),
    url('{{ "Gotham-Book.ttf" | asset_url }}') format('truetype'),
    url('{{ "Gotham-Book.svg | asset_url }}#Gotham-Book') format('svg');      font-weight: normal;   font-style: normal; }

Also uploaded the font files in Assets Folder.

Question: How to use font for all headings, My theme using sass variables,

Solution

Upload font files in assets folder

If your font has multiple files, you will have to repeat this process for each one.

Link The Fonts In Your CSS

Open your theme’s CSS file. In most themes, this is called theme.scss.liquid

@font-face {
    font-family: 'your-font';
    src: url('./your-font.eot');
    src: url('./your-font.eot?#iefix') format('embedded-opentype'),
         url('./your-font.woff2') format('woff2'),
         url('./your-font.woff') format('woff'),
         url('./your-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Replace font-family in your theme.scss.liquid

Answered By - Varsha Dhadge

Answer Checked By - Katrina (PHPFixing Volunteer)

Read More

[FIXED] how to change wordpress' wp-login.php font to a custom font-family?

Issue

I have uploaded a custom font to my wordpress site and changed the font family everywhere. However, the wp-login.php page's font will not change. I have tried editing the functions.php file multiple times but none of my changes take effect.

What I need is to have a custom font that I uploaded through a plugin, Brainstorm Force's custom fonts plugin to be exact, applied to my wp-login.php page

Thank you in advance

Solution

The solution was simple. I uploaded the font files, linked them through font face in the main style stylesheet and used the font family.

Answered By - Chief Developer

Answer Checked By - Gilberto Lyons (PHPFixing Admin)

Read More

[FIXED] How I can load a font file with PIL.ImageFont.truetype without specifying the absolute path?

Issue

When I write the code in Windows, this code can load the font file just fine:

ImageFont.truetype(filename='msyhbd.ttf', size=30);

I guess the font location is registered in Windows registry. But when I move the code to Ubuntu, and copy the font file over to /usr/share/fonts/, the code cannot locate the font:

 self.font = core.getfont(font, size, index, encoding)
 IOError: cannot open resource

How can I get PIL to find the ttf file without specifying the absolute path?

Solution

According to the PIL documentation, only Windows font directory is searched:

On Windows, if the given file name does not exist, the loader also looks in Windows fonts directory.

http://effbot.org/imagingbook/imagefont.htm

So you need to write your own code to search for the full path on Linux.

However, Pillow, the PIL fork, currently has a PR to search a Linux directory. It's not exactly clear yet which directories to search for all Linux variants, but you can see the code here and perhaps contribute to the PR:

https://github.com/python-pillow/Pillow/pull/682

Answered By - Hugo

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How to add a simple text label to an image in Go?

Issue

Given image.RGBA, coordinates, and a line of text, how do I add a simple label with any plain fixed font? E.g. Face7x13 from font/basicfont.

package main

import (
    "image"
    "image/color"
    "image/png"
    "os"
)

func main() {
    img := image.NewRGBA(image.Rect(0, 0, 320, 240))
    x, y := 100, 100
    addLabel(img, x, y, "Test123")
    png.Encode(os.Stdout, img)
}

func addLabel(img *image.RGBA, x, y int, label string) {
     col := color.Black
     // now what?
}

Alignment doesn't really matter, but best if I could write the label above a line which starts at the coordinates.

And I would like to avoid external loadable dependencies like fonts.

Solution

The golang.org/x/image/font package just defines interfaces for font faces and drawing text on images.

You may use the Go implementation of Freetype font rasterizer: github.com/golang/freetype.

The key type is freetype.Context, it has all the methods you need.

For a complete example, check out this file: example/freetype/main.go. This example loads a font file, creates and configures freetype.Context, draws text on image and saves the result image to file.

Let's assume you already have the font file loaded, and a c context configured (see the example how to do that). Then your addLabel() function could look like this:

func addLabel(img *image.RGBA, x, y int, label string) {
    c.SetDst(img)
    size := 12.0 // font size in pixels
    pt := freetype.Pt(x, y+int(c.PointToFixed(size)>>6))

    if _, err := c.DrawString(label, pt); err != nil {
        // handle error
    }
}

If you don't want to hassle with the freetype package and external font files, the font/basicfont package contains a basic font named Face7x13 whose graphical data is entirely self-contained. This is how you could use that:

import (
    "golang.org/x/image/font"
    "golang.org/x/image/font/basicfont"
    "golang.org/x/image/math/fixed"
    "image"
    "image/color"
)

func addLabel(img *image.RGBA, x, y int, label string) {
    col := color.RGBA{200, 100, 0, 255}
    point := fixed.Point26_6{fixed.I(x), fixed.I(y)}

    d := &font.Drawer{
        Dst:  img,
        Src:  image.NewUniform(col),
        Face: basicfont.Face7x13,
        Dot:  point,
    }
    d.DrawString(label)
}

This is how this addLabel() function can be used: the code below creates a new image, draws the "Hello Go" text on it and saves it in a file named hello-go.png:

func main() {
    img := image.NewRGBA(image.Rect(0, 0, 300, 100))
    addLabel(img, 20, 30, "Hello Go")

    f, err := os.Create("hello-go.png")
    if err != nil {
        panic(err)
    }
    defer f.Close()
    if err := png.Encode(f, img); err != nil {
        panic(err)
    }
}

Note the above code also requires the "image/png" package import.

Also note that the y coordinate given will be the bottom line of the text. So if you want to draw a line to the top left corner, you have to use x = 0 and y = 13 (13 is the height of this Face7x13 font). If you wish, you could build this into the addLabel() function by subtracting 13 from the y coordinate, so that the passed y coordinate would be the top coordinate at which the text will be drawn.

There is also an additional self-contained font in the golang.org/x/image/font/inconsolata package with regular and bold style, to use them, you only need to specify a different Face in addLabel():

import "golang.org/x/image/font/inconsolata"

        // To use regular Inconsolata font family:
        Face: inconsolata.Regular8x16,

        // To use bold Inconsolata font family:
        Face: inconsolata.Bold8x16,

Answered By - icza

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to add a simple text label to an image in Go?

Issue

Given image.RGBA, coordinates, and a line of text, how do I add a simple label with any plain fixed font? E.g. Face7x13 from font/basicfont.

package main

import (
    "image"
    "image/color"
    "image/png"
    "os"
)

func main() {
    img := image.NewRGBA(image.Rect(0, 0, 320, 240))
    x, y := 100, 100
    addLabel(img, x, y, "Test123")
    png.Encode(os.Stdout, img)
}

func addLabel(img *image.RGBA, x, y int, label string) {
     col := color.Black
     // now what?
}

Alignment doesn't really matter, but best if I could write the label above a line which starts at the coordinates.

And I would like to avoid external loadable dependencies like fonts.

Solution

The golang.org/x/image/font package just defines interfaces for font faces and drawing text on images.

You may use the Go implementation of Freetype font rasterizer: github.com/golang/freetype.

The key type is freetype.Context, it has all the methods you need.

For a complete example, check out this file: example/freetype/main.go. This example loads a font file, creates and configures freetype.Context, draws text on image and saves the result image to file.

Let's assume you already have the font file loaded, and a c context configured (see the example how to do that). Then your addLabel() function could look like this:

func addLabel(img *image.RGBA, x, y int, label string) {
    c.SetDst(img)
    size := 12.0 // font size in pixels
    pt := freetype.Pt(x, y+int(c.PointToFixed(size)>>6))

    if _, err := c.DrawString(label, pt); err != nil {
        // handle error
    }
}

If you don't want to hassle with the freetype package and external font files, the font/basicfont package contains a basic font named Face7x13 whose graphical data is entirely self-contained. This is how you could use that:

import (
    "golang.org/x/image/font"
    "golang.org/x/image/font/basicfont"
    "golang.org/x/image/math/fixed"
    "image"
    "image/color"
)

func addLabel(img *image.RGBA, x, y int, label string) {
    col := color.RGBA{200, 100, 0, 255}
    point := fixed.Point26_6{fixed.I(x), fixed.I(y)}

    d := &font.Drawer{
        Dst:  img,
        Src:  image.NewUniform(col),
        Face: basicfont.Face7x13,
        Dot:  point,
    }
    d.DrawString(label)
}

This is how this addLabel() function can be used: the code below creates a new image, draws the "Hello Go" text on it and saves it in a file named hello-go.png:

func main() {
    img := image.NewRGBA(image.Rect(0, 0, 300, 100))
    addLabel(img, 20, 30, "Hello Go")

    f, err := os.Create("hello-go.png")
    if err != nil {
        panic(err)
    }
    defer f.Close()
    if err := png.Encode(f, img); err != nil {
        panic(err)
    }
}

Note the above code also requires the "image/png" package import.

Also note that the y coordinate given will be the bottom line of the text. So if you want to draw a line to the top left corner, you have to use x = 0 and y = 13 (13 is the height of this Face7x13 font). If you wish, you could build this into the addLabel() function by subtracting 13 from the y coordinate, so that the passed y coordinate would be the top coordinate at which the text will be drawn.

There is also an additional self-contained font in the golang.org/x/image/font/inconsolata package with regular and bold style, to use them, you only need to specify a different Face in addLabel():

import "golang.org/x/image/font/inconsolata"

        // To use regular Inconsolata font family:
        Face: inconsolata.Regular8x16,

        // To use bold Inconsolata font family:
        Face: inconsolata.Bold8x16,

Answered By - icza

Answer Checked By - Willingham (PHPFixing Volunteer)

Read More

[FIXED] How to fix/hide `Unable to enumarate family warning` in pyqt5?

Issue

Each time I run my python script I'm facing this warning:

qt.qpa.fonts: Unable to enumerate family

What can be the cause of this warning? How do I fix this warning? If this warning can't be fixed, how can this hide or silenced?

Edit: I've tried to install all the fonts in the warning but it still persists.

The warning is on the left side of the picture and the list of fonts installed in my Windows 10 system is on the right side.

Solution

Warning is just a hint for the developer, not an error. You can hide this warning with:

import warnings
warnings.filterwarnings('ignore')

Im not sure about this warning but i think this warning often occurs when PyQt5 cannot find any fonts in your system.

Most often it means that you don't have fonts installed on your system. So, try to install them.

Most often fonts are installed in /usr/share/fonts directory. You can install fonts by using command:

sudo apt-get install xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic

If you are using other distribution, you can search for similar command and install fonts.

Answered By - Leon Zajchowski

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to change Font Family and position of text on a Pie chart in R

Issue

I have pie chart below in R.
I wan to : 1- change the font family to let s say Arial Narrow. 2- move the inner chart percentage labels farther from the center. How can I do this?

ALSO, if possible I would love to know what s the logic behind the order R opts for legend? why not from the largest proportion to the smallest?

mydf <- data.frame(
causes=c("a", "b", "c", "d", "other"),
freq=c(100, 80, 78, 75, 120),#
share= 100*c(100/sum(freq), 80/sum(freq), 78/sum(freq), 75/sum(freq), 120/sum(freq))
 )
sum(freq)
ggplot(mydf, aes("", share, fill = causes)) +



geom_bar(width = 1, size = 1, color = "white", stat = "identity") +
  coord_polar("y") +
  geom_text(aes(label = paste0(round(share), "%")), 
            position = position_stack(vjust = 0.5), size=5, col="white") +
  labs(x = NULL, y = NULL, fill = NULL, 
       title = "leading causes of death in US") +
  guides(fill = guide_legend(reverse = TRUE)) +
  scale_fill_manual(values = c("#003B6D", "#6699CC", "#BDBDBD", "#676767", "#EBEDF3")) +
  theme_classic() +
  theme(axis.line = element_blank(),
    axis.text = element_blank(),
    axis.ticks = element_blank(),
    plot.title = element_text(hjust = 0.5, color = "#666666"))

Solution

Try this way

mydf$Label  <- round(((mydf$freq/sum(mydf$freq))*100),2)
mydf <- mydf %>%
  mutate(end = 2 * pi * cumsum(Label)/sum(Label),
         start = lag(end, default = 0),
         middle = 0.5 * (start + end),
         hjust = ifelse(middle > pi, 1, 0),
         vjust = ifelse(middle < pi/2 | middle > 3 * pi/2, 0, 1))


ggplot(mydf) + 
  ggforce::geom_arc_bar(aes(x0 = 0, y0 = 0, r0 = 0, r = 1,
                   start = start, end = end, fill = causes)) +
  geom_text(aes(x = 1.05 * sin(middle), y = 1.05 * cos(middle), label = Label,
                hjust = hjust, vjust = vjust)) +
  coord_fixed() +
  labs(x = NULL, y = NULL, fill = NULL, 
       title = "leading causes of death in US") +
  guides(fill = guide_legend(reverse = TRUE)) +
  scale_fill_manual(values = c("#003B6D", "#6699CC", "#BDBDBD", "#676767", "#EBEDF3")) +
  theme_classic() +
  theme(axis.line = element_blank(),
        axis.text = element_blank(),
        axis.ticks = element_blank(),
        plot.title = element_text(hjust = 0.5, color = "#666666"))

Inside

mydf <- mydf %>%
  mutate(end = 2 * pi * cumsum(Label)/sum(Label),
         start = lag(end, default = 0),
         middle = 0.5 * (start + end),
         hjust = ifelse(middle > pi, 0, 1),
         vjust = ifelse(middle < pi/2 | middle > 3 * pi/2, 1, 0))


ggplot(mydf) + 
  ggforce::geom_arc_bar(aes(x0 = 0, y0 = 0, r0 = 0, r = 1,
                            start = start, end = end, fill = causes)) +
  geom_text(aes(x = 0.95 * sin(middle), y = 0.95 * cos(middle), label = Label,
                hjust = hjust, vjust = vjust)) +
  coord_fixed() +
  labs(x = NULL, y = NULL, fill = NULL, 
       title = "leading causes of death in US") +
  guides(fill = guide_legend(reverse = TRUE)) +
  scale_fill_manual(values = c("#003B6D", "#6699CC", "#BDBDBD", "#676767", "#EBEDF3")) +
  theme_classic() +
  theme(axis.line = element_blank(),
        axis.text = element_blank(),
        axis.ticks = element_blank(),
        plot.title = element_text(hjust = 0.5, color = "#666666"))

font

ggplot(mydf) + 
  ggforce::geom_arc_bar(aes(x0 = 0, y0 = 0, r0 = 0, r = 1,
                            start = start, end = end, fill = causes)) +
  geom_text(aes(x = 0.95 * sin(middle), y = 0.95 * cos(middle), label = Label,
                hjust = hjust, vjust = vjust), fontface = "bold") + #inside chart here
  coord_fixed() +
  labs(x = NULL, y = NULL, fill = NULL, 
       title = "leading causes of death in US") +
  guides(fill = guide_legend(reverse = TRUE)) +
  scale_fill_manual(values = c("#003B6D", "#6699CC", "#BDBDBD", "#676767", "#EBEDF3")) +
  theme_classic() +
  theme(axis.line = element_blank(),
        axis.text = element_blank(),
        axis.ticks = element_blank(),
        plot.title = element_text(hjust = 0.5, color = "#666666"),
        text = element_text(family = "sans")) #title here

for fontface, "plain", "bold", "italic", "bold.italic" are available and for element_text(family), mono

sans
serif
Courier
Helvetica
Times
AvantGarde
Bookman
Helvetica-Narrow
NewCenturySchoolbook
Palatino
URWGothic
URWBookman
NimbusMon
URWHelvetica
NimbusSan
NimbusSanCond
CenturySch
URWPalladio
URWTimes
NimbusRom

are available.

Answered By - Park

Answer Checked By - Katrina (PHPFixing Volunteer)

Read More

[FIXED] How to use font awesome inside laravel Voyager?

Issue

is it possible to use font awesome in laravel voyager? If so how do I go about using it?

Solution

You can do that by adding your css from config/voyager.php in additional_css

Install Font Awesome using npm i @fortawesome/fontawesome-free --save-dev

Create laravel mix file resources\sass\font-awesome.scss and import fontawesome file in that mix

//Font Awesome

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

@import '~@fortawesome/fontawesome-free/scss/solid';

@import '~@fortawesome/fontawesome-free/scss/regular';

@import '~@fortawesome/fontawesome-free/scss/brands';

In webpack.mix.js

mix.js('resources/js/app.js', 'public/js')

    .sass('resources/sass/app.scss', 'public/css')

    .sass('resources/sass/font-awesome.scss', 'public/css');

npm run dev compile css file using this command for dev environment

config\voyager.php

'additional_css' => [

    'css/font-awesome.css',

],

Answered By - Apurv Bhavsar

Read More