Skip to content

Change the font of the logo #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ludg1e opened this issue Feb 3, 2024 · 19 comments
Closed

Change the font of the logo #8

ludg1e opened this issue Feb 3, 2024 · 19 comments

Comments

@ludg1e
Copy link

ludg1e commented Feb 3, 2024

Hello!

I'm writing this issue because I think that Cantarell is a "deprecated" font and in case the project in the future needs a branding according to the logo, maybe a more mainstream font could be used.

Disclaimer: this issue isn't driven by any thought of hate towards GNOME nor the Cantarell font

Reasons:

  • GNOME, the main adopter of Cantarell, while there isn't a public announcement, internally there are already issues on the bugtracker by GNOME designers to switch the font of the project. Suggestions are something with wide character support and a bigger community, such as Inter or Noto Sans. [1], [2]
  • Cantarell hasn't got any activity on its source code repository in a decade, and in the GNOME repository the last release is from some years ago
  • The font itself has rendering problems on Qt programs, looking weird
  • Off-topic: Cantarell doesn't have good support for non-latin scripts

Pros:

  • Use of a more mainstream font, with support for non-latin scripts (optional) and a wider community (not that optional, but still optional), in case in the future the project needs a branding (I doubt, but who knows)

Cons:

  • Maybe labwc maintainers don't like the idea of switching from Cantarell to another font
  • Maybe it's a burden doing this
  • Maybe the community doesn't like the idea
  • Maybe I'm thinking too far

Suggestions:
The idea is to find a font that matches Cantarell look, while having as well an open source license. Mostly it'd be interesting to match the "L" shape, that feels quite characteristic from the logo, I think so

Current font for comparison (extracted from the logo at the website):
image

Discarded:

  • Ubuntu font. Is too attached to the Ubuntu logo and branding. Plus, it uses a license that isn't that much "open" as OFL

Other ideas:

  • Use a monospace font (thoughts?)
  • Remove the "labwc" word from the logo and leave only the cube

Sigh: this is a nonsense issue
Maintainer, feel free to close this in case it's not needed

@johanmalm
Copy link
Contributor

How about Futura PT Book?

@ludg1e
Copy link
Author

ludg1e commented Feb 3, 2024

How about Futura PT Book?

I suggested those (from the original text) because maybe users could mistake the lowercase "L" in fonts like Inter, Noto Sans and the one you mentioned Futura PT Book, for a capital "i" (I) (for ref: Il; iL)

But you're the project leader, so it's up to you (and the maintainers I guess too) (and the community of devs around the project too?)

Though this one looks that doesn't have an open license (OFL?). I'm afraid, personally, of using fonts with licenses that aren't OFL as to avoid legal issues

Edit: in Adobe website they state that fonts hosted on their platform are free to use commercially and anywhere you'd like, so I guess it's OK? https://helpx.adobe.com/fonts/using/font-licensing.html#act-img

image

@01micko
Copy link

01micko commented Feb 3, 2024

Well, if we use svg IMHO we want it to be as portable as possible. mono would be my preference

labwc

edit: Of course the big advantage of svg is scalability and it is easy of course to convert to other formats.

@01micko
Copy link

01micko commented Feb 4, 2024

I took the liberty to knock one up

<?xml version="1.0" encoding="UTF-8"?>
<!--labwc with text #3 (C) 2024 Johan Malm, domo141, Mick Amadio LICENSE: CC BY-SA 4.0-->
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="184px"
     viewbox="0 0 600 184"
     stroke-linecap="round" stroke-linejoin="round" stroke-width="12">
  <path fill="#f0d70f" stroke="#f0d70f" d="m 20 10 91 55 v 108 l -76 -61 z" />
  <path fill="#d02f90" stroke="#d02f90" d="m 223 10 -91 55 v 108 l 76 -61 z" />
  <style>
    .lab {
      font: 500 100px mono;
      fill: #f9f9f9;
    }
  </style>
  <text x="290" y="144" class="lab">labwc</text>
</svg>

natural size

labwc3-with-text

actual website file

labwc2-with-text

website size

labwc3-with-text-width200

You'll see it is pretty close, without being perfect, to the size of the original in website form. You can drop in any font you want in the svg and adjust size and position as necessary. Logo based on the svg --> #7 (comment) so attribution added.

@ludg1e
Copy link
Author

ludg1e commented Feb 6, 2024

Up to Johan's decision, I believe

@domo141
Copy link

domo141 commented Feb 9, 2024

great work 01micko. took your version and adjusted it to the current "base"
in labwc/data/labwc.svg
(the changes in "content style" strictly mechanical, just to be "consistent")

<?xml version="1.0" encoding="UTF-8"?>
<!--labwc with text (C) 2024 Johan Malm, Tomi Ollila, Mick Amadio LICENSE: CC BY-SA 4.0-->
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="256px"
     viewbox="0 0 600 256"
     stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
     font-size="100px" font-family="monospace" font-weight="normal">
  <path fill="#f0d70f" stroke="#f0d70f" d="m 26 68 91 55 v 108 l -76 -61 z" />
  <path fill="#d02f90" stroke="#d02f90" d="m 229 68 -91 55 v 108 l 76 -61 z" />
  <text fill="#f9f9f9" x="290" y="200">labwc</text>
</svg>

That looks pretty much like the above in web view, however using feh(1) or
convert -background grey30 labwc-with-text.svg labwc-with-text.png gives
image like this:

labwc-with-text

hmm, it scaled :O (YMMV) -- anyway I meant the font. color was chosen to see the image boundaries.

@domo141
Copy link

domo141 commented Feb 16, 2024

actually, the above looked the same in web view. I failed to test, also s/monospace/mono/ yielded
the same result. I also "failed" to copy the 500 -- "normal" is 400 in font weight.

So, it could be that "mono" may look different from browser to browser..

Whenever a font is chosen, there is yet one option, to embed the glyphs to the .svg file itself.

I did an experiment embedding l a b w c glyphs from Hack-Regular.svg (converted from Hack-Regular.ttf using fontforge) -- While Cantarell is GPLv3 (and labwc GPLv2), Hack has more "compatible" license, close to OFL.

The .svg is (currently) a bit messy so just embedding pix now -- should there be interest to it I'll tune more:

labwc-x

text using cantarell is in black below. since glyph's in svg deprecated, I did not check how those
can be used, but used<path d="...">s instead, wrapped in <g>s to translate and scale.

As usual, I did this for fun, just to try alternatives. The .svg in question is 2K-ish in size.

@01micko
Copy link

01micko commented Feb 18, 2024

I went a bit overboard - but this is actually a variation of a prog I wrote 9 years ago - mkwallpaper

labwcimg

the svg (result of the folowing cairo prog)

labwcimg.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="184" viewBox="0 0 600 184">
<defs>
<g>
<g id="glyph-0-0">
<path d="M 16.203125 -7 C 17.128906 -6.664062 18.328125 -6.5 19.796875 -6.5 C 21.265625 -6.5 23.195312 -6.863281 25.59375 -7.59375 L 25.59375 -1.40625 C 25.394531 -1.332031 24.863281 -1.128906 24 -0.796875 C 23.132812 -0.460938 22.398438 -0.195312 21.796875 0 C 19.929688 0.664062 17.695312 1 15.09375 1 C 12.5 1 10.25 -0.046875 8.34375 -2.140625 C 6.445312 -4.242188 5.5 -7.03125 5.5 -10.5 L 5.5 -67.09375 L 13.5 -67.09375 L 13.5 -13.40625 C 13.4375 -9.800781 14.335938 -7.664062 16.203125 -7 Z M 16.203125 -7 "/>
</g>
<g id="glyph-0-1">
<path d="M 7.296875 -45.90625 C 12.492188 -47.90625 17.910156 -48.90625 23.546875 -48.90625 C 29.179688 -48.90625 33.347656 -48.003906 36.046875 -46.203125 C 38.742188 -44.398438 40.523438 -42.378906 41.390625 -40.140625 C 42.265625 -37.910156 42.703125 -34.960938 42.703125 -31.296875 L 42.703125 0 L 36.59375 0 L 34.796875 -4.5 C 30.328125 -0.695312 25.394531 1.203125 20 1.203125 C 19.46875 1.203125 18.9375 1.164062 18.40625 1.09375 C 14.9375 0.894531 11.75 -0.367188 8.84375 -2.703125 C 5.945312 -5.035156 4.5 -8.117188 4.5 -11.953125 C 4.5 -15.785156 5.632812 -18.9375 7.90625 -21.40625 C 10.164062 -23.738281 12.960938 -25.367188 16.296875 -26.296875 C 21.097656 -27.492188 27.164062 -28.195312 34.5 -28.40625 L 34.5 -28.796875 C 34.5 -32.203125 34.195312 -34.703125 33.59375 -36.296875 C 32.195312 -40.097656 28.53125 -42 22.59375 -42 C 19.664062 -42 16.132812 -41.53125 12 -40.59375 C 9.0625 -39.863281 7.492188 -39.46875 7.296875 -39.40625 Z M 34.5 -10.90625 L 34.5 -22.40625 C 27.96875 -22.195312 23.703125 -21.894531 21.703125 -21.5 C 17.898438 -20.632812 15.195312 -18.9375 13.59375 -16.40625 C 12.863281 -15.195312 12.53125 -14.03125 12.59375 -12.90625 C 12.59375 -11.5 13.09375 -10.128906 14.09375 -8.796875 C 14.832031 -7.734375 16.035156 -6.800781 17.703125 -6 C 18.628906 -5.53125 19.863281 -5.296875 21.40625 -5.296875 C 22.601562 -5.296875 23.867188 -5.429688 25.203125 -5.703125 C 28.535156 -6.296875 31.632812 -8.03125 34.5 -10.90625 Z M 34.5 -10.90625 "/>
</g>
<g id="glyph-0-2">
<path d="M 25.703125 -5.90625 C 30.765625 -5.90625 34.628906 -7.535156 37.296875 -10.796875 C 39.960938 -14.066406 41.296875 -18.566406 41.296875 -24.296875 C 41.296875 -30.035156 39.910156 -34.585938 37.140625 -37.953125 C 34.378906 -41.316406 30.53125 -43 25.59375 -43 C 22 -43 18.398438 -42.234375 14.796875 -40.703125 L 14.796875 -8.90625 C 18.398438 -6.90625 22.035156 -5.90625 25.703125 -5.90625 Z M 14.796875 -47.09375 C 18.460938 -48.632812 22.332031 -49.40625 26.40625 -49.40625 C 33.070312 -49.40625 38.632812 -47.1875 43.09375 -42.75 C 47.5625 -38.3125 49.796875 -31.925781 49.796875 -23.59375 C 49.796875 -13.53125 46.429688 -6.398438 39.703125 -2.203125 C 36.367188 -0.128906 32.316406 0.90625 27.546875 0.90625 C 22.785156 0.90625 18.203125 -0.53125 13.796875 -3.40625 L 12.40625 0 L 6.5 0 L 6.5 -67.09375 L 14.796875 -67.09375 Z M 14.796875 -47.09375 "/>
</g>
<g id="glyph-0-3">
<path d="M 2.703125 -48.203125 L 11.203125 -48.203125 L 24.296875 -7.796875 L 37.203125 -48.203125 L 45.09375 -48.203125 L 57.5 -7.796875 L 70.59375 -48.203125 L 79.09375 -48.203125 L 61.5 0 L 53.40625 0 L 40.796875 -39.09375 L 27.90625 0 L 20.296875 0 Z M 2.703125 -48.203125 "/>
</g>
<g id="glyph-0-4">
<path d="M 29.703125 -49.09375 C 29.898438 -49.09375 30.066406 -49.09375 30.203125 -49.09375 C 34.066406 -49.09375 38.234375 -48.128906 42.703125 -46.203125 L 40.703125 -40.40625 C 37.035156 -41.664062 33.664062 -42.296875 30.59375 -42.296875 C 30.394531 -42.296875 30.195312 -42.296875 30 -42.296875 C 19 -41.828125 13.5 -35.960938 13.5 -24.703125 C 13.5 -24.035156 13.53125 -23.332031 13.59375 -22.59375 C 14 -15.59375 16.5 -10.757812 21.09375 -8.09375 C 23.226562 -6.894531 25.929688 -6.097656 29.203125 -5.703125 C 29.929688 -5.628906 30.664062 -5.59375 31.40625 -5.59375 C 34.070312 -5.59375 37.003906 -6.128906 40.203125 -7.203125 L 42.09375 -1.703125 C 37.5 0.0976562 33.132812 1 29 1 C 28.863281 1 28.695312 1 28.5 1 C 20.101562 1 13.9375 -1.765625 10 -7.296875 C 7.269531 -11.160156 5.835938 -16.660156 5.703125 -23.796875 C 5.703125 -23.992188 5.703125 -24.160156 5.703125 -24.296875 C 5.703125 -31.234375 7.632812 -37.035156 11.5 -41.703125 C 15.5625 -46.566406 21.628906 -49.03125 29.703125 -49.09375 Z M 29.703125 -49.09375 "/>
</g>
</g>
</defs>
<path fill-rule="nonzero" fill="rgb(94%, 84%, 5%)" fill-opacity="1" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(94%, 84%, 5%)" stroke-opacity="1" stroke-miterlimit="10" d="M 20 10 L 111 65 L 111 163 L 35 102 Z M 20 10 "/>
<path fill-rule="nonzero" fill="rgb(81%, 18%, 56%)" fill-opacity="1" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" stroke="rgb(81%, 18%, 56%)" stroke-opacity="1" stroke-miterlimit="10" d="M 223 10 L 132 65 L 132 163 L 208 102 Z M 223 10 "/>
<g fill="rgb(97.000003%, 97.000003%, 97.000003%)" fill-opacity="1">
<use xlink:href="#glyph-0-0" x="280" y="135.799805"/>
<use xlink:href="#glyph-0-1" x="306" y="135.799805"/>
<use xlink:href="#glyph-0-2" x="355" y="135.799805"/>
<use xlink:href="#glyph-0-3" x="410" y="135.799805"/>
<use xlink:href="#glyph-0-4" x="492" y="135.799805"/>
</g>
</svg>

the cairo prog

mklabimg.c
#include <stdio.h>
#include <unistd.h>

#include <cairo-svg.h>
#include <pango/pangocairo.h>

void usage() {
	printf("mklabimg -f font[str] -s fontsize[int] -v font_vertical_position[int]\n"
		"-h font_horizontal_position[int]\n"
		"at least 1 option is required\n");
	exit (EXIT_SUCCESS);
}

int main(int argc, char **argv) {
	if (argc < 2) {
		usage();
		return 0;
	}
	int f_size = 80;
	char *font = "Sans";
	int fnt_vert = 30;
	int fnt_hor = 300;
	int d;
	while ((d = getopt (argc, argv, "f:s:v:h:")) != -1) {
		switch (d)
		{
			case 'f':
				font = optarg;
				break;
			case 's':
				f_size = atoi(optarg);
				break;
			case 'v':
				fnt_vert = atoi(optarg);
				break;
			case 'h':
				fnt_hor = atoi(optarg);
				break;
			default:
				usage();
			
		}
	}
	
	int wdth = 600;
	int hght = 184;
	char destimg[PATH_MAX];
	char *dest = getenv("HOME");
	char *name = "labwcimg";
	cairo_surface_t *cs;
	snprintf(destimg, sizeof(destimg), "%s/%s.svg", dest, name);
	cs = cairo_svg_surface_create(destimg, wdth, hght);
	
	cairo_t *c;
	c = cairo_create(cs);
	
	/* labwc icon and position */
	
	cairo_set_source_rgba(c, 0, 0, 0, 0);
	cairo_rectangle(c, 0.0, 0.0, wdth, hght);
	cairo_fill(c);
	
	cairo_set_source_rgb(c, 0.94, 0.84, 0.05);
	cairo_set_line_cap (c, CAIRO_LINE_CAP_ROUND);
	cairo_set_line_join (c, CAIRO_LINE_JOIN_ROUND);
	
	cairo_move_to(c, 20, 10);
	cairo_line_to (c, 111, 65);
	cairo_line_to (c, 111, 163);
	cairo_line_to (c, 35, 102);
	cairo_line_to (c, 20, 10);
	cairo_close_path (c);
	cairo_fill(c);
	
	cairo_set_line_width (c, 12.0);
	cairo_move_to(c, 20, 10);
	cairo_line_to (c, 111, 65);
	cairo_line_to (c, 111, 163);
	cairo_line_to (c, 35, 102);
	cairo_line_to (c, 20, 10);
	cairo_close_path (c);	
	cairo_stroke (c);
	
	cairo_set_source_rgb(c, 0.81, 0.18, 0.56);
	cairo_move_to(c, 223, 10);
	cairo_line_to (c, 132, 65);
	cairo_line_to (c, 132, 163);
	cairo_line_to (c, 208, 102);
	cairo_line_to (c, 223, 10);
	cairo_close_path (c);
	cairo_fill(c);
	
	cairo_move_to(c, 223, 10);
	cairo_line_to (c, 132, 65);
	cairo_line_to (c, 132, 163);
	cairo_line_to (c, 208, 102);
	cairo_line_to (c, 223, 10);
	cairo_close_path (c);
	cairo_stroke(c);
	
	/* font */
	float rgb = 0.97; /* font color */
	char *label = "labwc";
	
	PangoLayout *layout;
	PangoFontDescription *font_description;

	font_description = pango_font_description_new ();
	pango_font_description_set_family (font_description, font);
	pango_font_description_set_style (font_description, PANGO_STYLE_NORMAL ); /*PANGO_STYLE_NORMAL = 0, PANGO_STYLE_OBLIQUE = 1*/
	pango_font_description_set_weight (font_description, PANGO_WEIGHT_NORMAL); /*PANGO_WEIGHT_NORMAL = 400, PANGO_WEIGHT_BOLD = 700*/
	pango_font_description_set_absolute_size (font_description, f_size * PANGO_SCALE);
	layout = pango_cairo_create_layout (c);
	pango_layout_set_font_description (layout, font_description);
	pango_layout_set_width (layout, 9 * wdth / 20 * PANGO_SCALE);
	pango_layout_set_alignment (layout, PANGO_ALIGN_LEFT); /*PANGO_ALIGN_LEFT, PANGO_ALIGN_CENTER, PANGO_ALIGN_RIGHT)*/
	pango_layout_set_wrap (layout, PANGO_WRAP_WORD);
	pango_layout_set_text (layout, label, -1);
	
	/* position of text */
	int xposi = fnt_hor;
	int yposi = fnt_vert;
	cairo_move_to(c, xposi , 1 * yposi);
	cairo_set_source_rgb(c, rgb, rgb, rgb);
	pango_cairo_show_layout (c, layout);
	
	cairo_status_t res = cairo_surface_status(cs);
	const char *ret;
	ret = cairo_status_to_string (res);
	if (res != CAIRO_STATUS_SUCCESS) {
		g_object_unref (layout);
		pango_font_description_free (font_description);
		cairo_surface_destroy(cs);
		cairo_destroy(c);
		fprintf(stderr, "Cairo : %s\n", ret);
		exit (EXIT_FAILURE);
	}
	/* cleanup */
	g_object_unref (layout);
	pango_font_description_free (font_description);
	cairo_surface_destroy(cs);
	cairo_destroy(c);
	fprintf(stdout, "image saved to %s\n", destimg);
	
	return 0;
}
Makefile
CC?=cc
CFLAGS+=-Wall -pedantic -std=gnu99 $(shell pkg-config --cflags pangocairo)
LDFLAGS+=$(shell pkg-config --libs pangocairo)

all: mklabimg

mklabimg: mklabimg.o
	$(CC) -o $@ $^ $(LDFLAGS)

mklabimg.o: mklabimg.c
	$(CC) -o $@ $(CFLAGS) -c $^

install:
	install -s -m 0755 mklabimg $(DESTDIR)/usr/local/bin/

clean:
	-rm -f *.o mklabimg

The image is hard coded in cairo, I think it's pretty close. The above image was produced with this C prog that uses cairo and pango. Cairo converts the glyphs into svg paths. The prog can accept any font and there is some scope to adjust the fontsize and position on the cli. This overcomes portability issues (but I'm not saying that the prog is in any way portable!). Just for fun.

A word of caution: this writes the image to your HOME as labwcimg.svg, and will overwrite next time prog is run. Use at own risk. GPLV2

@johanmalm
Copy link
Contributor

This overcomes portability issues

I like this. How about we add mklabimg.c to the labwc-artwork repo so that we can reproduce it in future if anything changes.

Looking at OP I think Nunito is the nicest. Thoughts from others welcome. I like the rounded ends of the glyphs. The the licence is a bonus.

@johanmalm
Copy link
Contributor

20240219_19h45m31s_grim

My turn to "just for fun"

@johanmalm
Copy link
Contributor

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!--labwc logo #2 (C) Johan Malm LICENSE: CC BY-SA 4.0-->

<svg
   width="256px"
   height="256px"
   viewbox="0 0 256 256"
   stroke-linecap="round"
   stroke-linejoin="round"
   stroke-width="12"
   version="1.1"
   id="svg2"
   sodipodi:docname="labwc-with-top.svg"
   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
   inkscape:export-filename="labwc-with-top.png"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2">
    <inkscape:path-effect
       effect="fillet_chamfer"
       id="path-effect3"
       is_visible="true"
       lpeversion="1"
       nodesatellites_param="F,0,0,1,0,5.1183519,0,1 @ F,0,0,1,0,6.3975817,0,1 @ F,0,0,1,0,8.5524903,0,1 @ F,0,0,1,0,5.4887154,0,1"
       radius="6"
       unit="px"
       method="auto"
       mode="F"
       chamfer_steps="1"
       flexible="false"
       use_knot_distance="true"
       apply_no_radius="true"
       apply_with_radius="true"
       only_selected="false"
       hide_knots="false" />
  </defs>
  <sodipodi:namedview
     id="namedview2"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="1.9800283"
     inkscape:cx="74.241361"
     inkscape:cy="111.10952"
     inkscape:window-width="1366"
     inkscape:window-height="712"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <path
     fill="#d02f90"
     stroke="#d02f90"
     d="M 117.52155,38.246154 41.967713,58.754245 54.649034,158.82947 117.37513,130.49601 Z"
     id="path2-3"
     style="opacity:0.5;stroke-width:10.2254"
     sodipodi:nodetypes="ccccc" />
  <path
     fill="#f0d70f"
     stroke="#f0d70f"
     d="m 138.31224,39.404699 74.45589,21.76184 -10.22515,100.970821 -64.15516,-30.54155 z"
     id="path1-6"
     sodipodi:nodetypes="ccccc"
     style="opacity:0.5" />
  <path
     fill="#f0d70f"
     stroke="#f0d70f"
     d="m 26 68 91 55 v 108 l -76 -61 z"
     id="path1" />
  <path
     fill="#d02f90"
     stroke="#d02f90"
     d="m 229 68 -91 55 v 108 l 76 -61 z"
     id="path2" />
  <path
     fill="#d02f90"
     stroke="#d02f90"
     d="M 122.33316,31.556244 39.877646,53.697395 a 2.6686313,2.6686313 97.611906 0 0 -0.652495,4.882484 l 81.522799,47.551171 a 14.67632,14.67632 0.02334921 0 0 14.77873,0.006 L 215.7258,59.445552 a 2.3329691,2.3329691 82.820085 0 0 -0.53671,-4.26046 L 132.2002,31.626619 a 18.532426,18.532426 0.40864181 0 0 -9.86704,-0.07038 z"
     id="path3"
     sodipodi:nodetypes="ccccc"
     style="display:none;opacity:0.3;fill:none;stroke-width:0.5;stroke-linejoin:round;stroke-dasharray:none"
     inkscape:path-effect="#path-effect3"
     inkscape:original-d="M 127.2764,30.228874 33.698943,55.356515 128.13556,110.44015 220.46918,56.683977 Z" />
</svg>

@domo141
Copy link

domo141 commented Feb 20, 2024

Hoo, nice cube -- and the mklabimg.c is inspiring.

So... let's stir the soup with yet one more .svg!

This one embeds glyphs from abattis-cantarell-fonts-0.301-10.fc39.noarch
which COPYING file tells it is OFL-licensed

This particular version -- for demonstration purposes, has <text>labwc</text> component,
in black - and then strokes the embedded glyphs (in #f9f9f9) on top of it.

The .png below is created on this Fedora 39 machine

ggc

And the (black...no, red) text rendering (if anything visible) is seen if the cantarell font in one's
own machine is different from the one embedded:

labwc-with-text-ggc

And here is the current .svg contents (1955 bytes in size)

<?xml version="1.0" encoding="UTF-8"?>
<!--labwc with text (C) 2024 Johan Malm, Tomi Ollila, Mick Amadio LICENSE: CC BY-SA 4.0-->
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="256px"
     viewbox="0 0 600 256"
     stroke-linecap="round" stroke-linejoin="round" stroke-width="12"
     font-size="100px" font-family="cantarell" font-weight="500">
  <path fill="#f0d70f" stroke="#f0d70f" d="m 26 68 91 55 v 108 l -76 -61 z" />
  <path fill="#d02f90" stroke="#d02f90" d="m 229 68 -91 55 v 108 l 76 -61 z" />

  <text x="290" y="200" fill="red">labwc</text>

  <g fill="#f9f9f9" transform="translate(290 200) scale(0.1 -0.1)" >
    <path d="M192 -6c-66 0 -109 45 -109 114v631h80v-621c0 -37 18 -60 52 -60c12 0 23 3 35 8l18 -56c-19 -10 -50 -16 -76 -16z" />
  </g>

  <g fill="#f9f9f9" transform="translate(320 200) scale(0.1 -0.1)" >
    <path d="M381 0l-19 45c-39 -35 -91 -55 -152 -55c-99 0 -163 55 -163 141c0 103 94 148 310 150v32c0 71 -44 107 -130 107c-47 0 -97 -11 -147 -33l-20 59c52 29 120 46 183 46c126 0 194 -64 194 -179v-313h-56zM357 108v118c-162 -1 -230 -26 -230 -86c0 -48 42 -80 106 -80 c50 0 94 18 124 48z" />
  </g>

  <g fill="#f9f9f9" transform="translate(370 200) scale(0.1 -0.1)" >
    <path d="M288 -10c-54 0 -99 16 -133 47l-16 -37h-56v739h80v-294c35 31 81 47 135 47c132 0 220 -98 220 -245c0 -154 -92 -257 -230 -257zM163 368v-247c29 -39 72 -61 125 -61c93 0 150 70 150 175c0 111 -63 187 -159 187c-48 0 -89 -19 -116 -54z" />
  </g>

  <g fill="#f9f9f9" transform="translate(430 200) scale(0.1 -0.1)" >
    <path d="M180 0l-166 482h91l117 -397l129 395h88l131 -389l119 391h80l-159 -482h-81l-139 388l-131 -388h-79z" />
  </g>

  <g fill="#f9f9f9" transform="translate(510 200) scale(0.1 -0.1)" >
    <path d="M272 -10c-138 0 -220 88 -220 237c0 159 96 265 239 265c48 0 95 -11 139 -32l-19 -65c-40 18 -83 27 -121 27c-100 0 -156 -63 -156 -179c0 -117 57 -187 157 -187c37 0 81 11 121 30l18 -58c-40 -24 -100 -38 -158 -38z" />
  </g>
</svg>

@01micko
Copy link

01micko commented Feb 21, 2024

We are having fun!

mklabimg.c next iteration (updated 240323)
/*
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
 * MA 02110-1301, USA.
 * 
 */
#include <stdio.h>
#include <unistd.h>

#include <cairo-svg.h>
#include <pango/pangocairo.h>

void usage() {
	printf("mklabimg -f font[str] -s fontsize[int] -v font_vertical_position[int]\n"
		"-h font_horizontal_position[int] -n filename[str] -z fancy xD [no arg]\n"
		"-b background color[\"float float float\"]\n\n"
		"at least 1 option is required\n"
		"file is saved to \"HOME/labwcimg\" or \"HOME/myfile\" with -n [arg] option\n");
	exit (EXIT_SUCCESS);
}

int main(int argc, char **argv) {
	if (argc < 2) {
		usage();
		return 0;
	}
	int f_size = 80;
	char *font = "Sans";
	char *bg = NULL;
	char *name = "labwcimg";
	int fnt_vert = 30;
	int fnt_hor = 300;
	int zflag;
	int d;
	while ((d = getopt (argc, argv, "f:b:s:n:v:h:z")) != -1) {
		switch (d)
		{
			case 'f':
				font = optarg;
				break;
			case 'b':
				bg = optarg;
				break;
			case 's':
				f_size = atoi(optarg);
				break;
			case 'n':
				name = optarg;
				break;
			case 'v':
				fnt_vert = atoi(optarg);
				break;
			case 'h':
				fnt_hor = atoi(optarg);
				break;
			case 'z':
				zflag = 1;
				break;
			default:
				usage();
			
		}
	}
	
	int wdth = 600;
	int hght = 184;
	int xh = 0;
	if (zflag == 1) {
		xh = 72;
		hght = hght + xh;
	}
	char destimg[PATH_MAX];
	char *dest = getenv("HOME");
	cairo_surface_t *cs;
	snprintf(destimg, sizeof(destimg), "%s/%s.svg", dest, name);
	cs = cairo_svg_surface_create(destimg, wdth, hght);
	
	cairo_t *c;
	c = cairo_create(cs);
	
	/* labwc icon and position */
	if (!bg) {
		cairo_set_source_rgba (c, 0, 0, 0, 0);
	} else {
		float r, g , b;
		char red[8];
		char green[8];
		char blue[8];
		int result = sscanf(bg, "%s %s %s", red, green, blue);
		if (result < 3) {
			fprintf(stderr,"ERROR: less than 3 colour aguments!\n");
			exit (EXIT_FAILURE);
		}
		r = atof(red);
		g = atof(green);
		b = atof(blue);
		cairo_set_source_rgb (c, r, g, b);
	}
	cairo_rectangle(c, 0.0, 0.0, wdth, hght);
	cairo_fill(c);
	
	/* fancy */
	if (zflag == 1) {
		cairo_set_source_rgba (c, 0.81, 0.18, 0.56, 0.3);
		cairo_move_to (c, 102, 24);
		cairo_line_to (c, 26, 45);
		cairo_curve_to (c, 19, 46, 19, 51, 20, 57);
		cairo_line_to (c, 31, 146);
		cairo_line_to (c, 112, 114);
		cairo_line_to (c, 112, 28);
		cairo_curve_to (c, 111, 24, 107, 23, 102, 24);
		cairo_close_path (c);
		cairo_fill (c);
		
		cairo_set_source_rgba (c, 0.94, 0.84, 0.05, 0.3);
		cairo_move_to (c, 131, 24);
		cairo_line_to (c, 207, 45);
		cairo_curve_to (c, 214, 46, 214, 51, 213, 57);
		cairo_line_to (c, 201, 146);
		cairo_line_to (c, 121, 114);
		cairo_line_to (c, 121, 28);
		cairo_curve_to (c, 122, 24, 126, 23, 131, 24);
		cairo_close_path (c);
		cairo_fill (c);
	} /* /fancy */
	
	cairo_set_source_rgb (c, 0.94, 0.84, 0.05);
	cairo_set_line_cap (c, CAIRO_LINE_CAP_ROUND);
	cairo_set_line_join (c, CAIRO_LINE_JOIN_ROUND);
	
	cairo_move_to (c, 7, 6 + xh);
	cairo_line_to (c, 106, 64 + xh);
	cairo_line_to (c, 106, 178 + xh);
	cairo_line_to (c, 24, 113 + xh);
	cairo_line_to (c, 7, 6 + xh);
	cairo_close_path (c);
	cairo_fill(c);
	
	cairo_set_line_width (c, 12.0);
	cairo_move_to (c, 7, 6 + xh);
	cairo_line_to (c, 106, 64 + xh);
	cairo_line_to (c, 106, 178 + xh);
	cairo_line_to (c, 24, 113 + xh);
	cairo_line_to (c, 7, 6 + xh);
	cairo_close_path (c);	
	cairo_stroke (c);
	
	cairo_set_source_rgb (c, 0.81, 0.18, 0.56);
	cairo_move_to (c, 226, 6 + xh);
	cairo_line_to (c, 127, 64 + xh);
	cairo_line_to (c, 127, 178 + xh);
	cairo_line_to (c, 209, 113 + xh);
	cairo_line_to (c, 226, 6 + xh);
	cairo_close_path (c);
	cairo_fill (c);
	
	cairo_move_to (c, 226, 6 + xh);
	cairo_line_to (c, 127, 64 + xh);
	cairo_line_to (c, 127, 178 + xh);
	cairo_line_to (c, 209, 113 + xh);
	cairo_line_to (c, 226, 6 + xh);
	cairo_close_path (c);
	cairo_stroke (c);
	
	/* font */
	float rgb = 0.97; /* font color */
	char *label = "labwc";
	
	PangoLayout *layout;
	PangoFontDescription *font_description;

	font_description = pango_font_description_new ();
	pango_font_description_set_family (font_description, font);
	pango_font_description_set_style (font_description, PANGO_STYLE_NORMAL ); /*PANGO_STYLE_NORMAL = 0, PANGO_STYLE_OBLIQUE = 1*/
	pango_font_description_set_weight (font_description, PANGO_WEIGHT_NORMAL); /*PANGO_WEIGHT_NORMAL = 400, PANGO_WEIGHT_BOLD = 700*/
	pango_font_description_set_absolute_size (font_description, f_size * PANGO_SCALE);
	layout = pango_cairo_create_layout (c);
	pango_layout_set_font_description (layout, font_description);
	pango_layout_set_width (layout, 9 * wdth / 20 * PANGO_SCALE);
	pango_layout_set_alignment (layout, PANGO_ALIGN_LEFT); /*PANGO_ALIGN_LEFT, PANGO_ALIGN_CENTER, PANGO_ALIGN_RIGHT)*/
	pango_layout_set_wrap (layout, PANGO_WRAP_WORD);
	pango_layout_set_text (layout, label, -1);
	
	/* position of text */
	int xposi = fnt_hor;
	int yposi = fnt_vert + xh;
	cairo_move_to (c, xposi , 1 * yposi);
	cairo_set_source_rgb (c, rgb, rgb, rgb);
	pango_cairo_show_layout (c, layout);
	
	cairo_status_t res = cairo_surface_status(cs);
	const char *ret;
	ret = cairo_status_to_string (res);
	if (res != CAIRO_STATUS_SUCCESS) {
		g_object_unref (layout);
		pango_font_description_free (font_description);
		cairo_surface_destroy (cs);
		cairo_destroy (c);
		fprintf (stderr, "Cairo : %s\n", ret);
		exit (EXIT_FAILURE);
	}
	/* cleanup */
	g_object_unref (layout);
	pango_font_description_free (font_description);
	cairo_surface_destroy (cs);
	cairo_destroy (c);
	fprintf (stdout, "image saved to %s\n", destimg);
	
	return 0;
}

A few more features (bugs?).

$~ mklabimg 
mklabimg -f font[str] -s fontsize[int] -v font_vertical_position[int]
-h font_horizontal_position[int] -n filename[str] -z fancy xD [no arg]
-b background color["float float float"]

at least 1 option is required
file is saved to "HOME/labwcimg" or "HOME/myfile" with -n [arg] option

@01micko
Copy link

01micko commented Feb 21, 2024

BTW, 👍 for nunito :)

mklabimg can be scripted for easy comparison too, so just run a loop with different fonts using the fontname in the filename.

@domo141
Copy link

domo141 commented Feb 21, 2024

Fun indeed!, and so interesting...

I installed vernnobile-nunito-fonts.noarch on Fedora 39.

then, when loading it to emacs, 'l' is "straight line", i.e. no curve.

When loading abattis-cantarell-fonts-0.301-10.fc39.noarch to emacs, the l is curved (like shown in my previous post)

When I loaded Cantarell.zip (from somewhere), it's 'l' is straight line like with the vernnobile-nunito-fonts.

@01micko
Copy link

01micko commented Mar 22, 2024

Website orig:

labwc2-with-text

Website proposed with Nunito font @johanmalm

labwc3-with-text

The font extent is marginally wider but fits nicely into the constraint of 199x61 albeit a little heavier in kilobytes.

@johanmalm
Copy link
Contributor

@01micko Shall we do a PR for the mklabimg programe and the resultant svg? It's nice to have the upstream-master so that we can reproduce it if/when it ever needs to change.

@01micko
Copy link

01micko commented Mar 23, 2024

Yes, just thinking where it belongs.. in a subdir of course but what to call that subdir? I'll sort it shortly.

@Consolatis
Copy link
Member

Consolatis commented Mar 23, 2024

Maybe utils or something like that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants