Compositing logos and accented letters

A Thought…

They told me I had a dirty mind, so they brain-washed me. My mind slipped down the brain drain and now it’s back in the gutter where it started.

— Kveldulf, Non Sequitur comic letters

Compositing logos and accented letters

Posted on 2017-Feb-24 at 11:29:19 by Phil

Sometimes it’s possible to build logos and unusual or rare accented letters through the use of HTML and CSS font selection, sizing, and precise positioning.

Some logos and made-up letters simply have to be done graphically, but others can be done with clever manipulation of ordinary text. For example, the gold standard for quality text markup is L A Τ Ε Χ . It is an extension of Donald Knuth’s Τ Ε Χ markup language. Would you like to see that in a larger text size: L A Τ Ε Χ and Τ Ε Χ . OK, show’s over. The HTML and PHP code to do this (large size):

L A Τ Ε Χ Τ Ε Χ

// $base is the upward adjustment ('ex' units), as larger font sizes seem // to bring the baseline down a bit too much // $right is the rightward adjustment ('em' units) of where the following // text starts, as larger font sizes seem to need a little shrinkage (neg) // TeX and LaTeX logos function LaTeX($base = 0, $right = 0) { print " L A Τ Ε Χ \n"; } // end of LaTeX() function TeX($base = 0, $right = 0) { print " Τ Ε Χ \n"; } // end of TeX()

Did you ever see the movie This is Spi n ¨ al Tap? No, I haven’t, either, but it’s of interest because they use an accented letter you won’t find in any font: n + diaesersis (umlaut). Here it is, bigger, if you want to shout it out: Spi n ¨ al Tap. Spi n ¨ al Tap! Some day I’ll get a good blackletter/fraktur/gothic font to use with this example. And the HTML and PHP code to create just the one letter (again, the large text):

n ¨

// n + diaesersis (umlaut) per Spi\:{n}al Tap // $e is the encoding string ('UTF-8', etc.) // $n is which font you're actually using at this time, // to fine tune the vertical spacing function nUml($e, $n, $base = 0, $right = 0) { if ($e == 'Latin-1') { $umlaut = chr(0xA8); } elseif ($e == 'UTF-8') { $umlaut = chr(0xC2).chr(0xA8); } else { // unknown encoding. default to Latin-1 for now $umlaut = chr(0xA8); } $v = '-0.80'; // adjust per $n (units 'ex') print " n $umlaut \n"; } // end of nUml()

Note that the exact vertical spacing of the letter and diaesersis may depend a bit on the font (typeface) in use. And of course, the font needs to provide the accent character (diaesersis/umlaut).

With that to start you off, please share other text-based logo code, new letters, unusual or rare accents with us! Also, improvements to the above code, especially to make it more platform-independent, are welcome.

Posted on 2017-Feb-24 at 17:11:52 by Phil

There’s a couple of problems that I haven’t yet figured out how to get around. In order to position things appropriately, I use display: inline-block; in the span’s styling. A minor problem resulting is that sometimes the whole thing ends up shifted down, sometimes all the way to the descender bottom. The amount is unpredictable — I’m still trying to figure this one out.

The more serious problem is that the inline-block apparently gives the rendering engine permission to insert a line break before or after the span, to best fit the text to the line. This isn’t a problem when the entire word is within the span (e.g., the LaTeX logo), although it might be if there is punctuation before or after it. A major problem is when an accented character is being formed (such as n + umlaut) — the word may be split before or after this character!

One workable solution is to wrap the entire word (and associated punctuation) in a … tag set: This is Spi<?php nUml(); ?>al Tap!

However, the  tag is deprecated. The suggested solution is to use CSS white-space: nowrap, but this is not the correct solution in this case — we’re not trying to suppress line breaks at whitespace, but within a word! In the interest of getting clean validation, I have not used  in the code.

I’m still looking for a solution, and suggestions are appreciated.

Posted on 2017-Feb-27 at 03:56:22 by sciurius

Personally, I think that using CSS to compose logos and accented letters is a fun thing, and not to be taken (too) seriously.

Posted on 2017-Feb-28 at 15:23:28 by Phil

Well, if the alternative is to use graphics, this may be viable in some cases (not just “for fun”). For example, text to be greatly scaled may look better with HTML/CSS than as a graphic. Anyway, the idea is to get people thinking about this method, as it may be useful for some. Admittedly, it’s not useful in this forum, as you can’t invoke arbitrary PHP code (it could be added as a BBCode).

Your mileage may vary. No warranties are expressed or implied. Not valid combined with other offers. Limit one to a customer. Offer expires last Wednesday.

Posted on 2017-Mar-01 at 02:26:21 by sciurius

That’s why we have scalable graphics, e.g. SVG.

Posted on 2017-Mar-01 at 09:36:41 by Phil
Last update on 2017-Mar-01 at 19:25:24 by Phil

Useful if 1) your text processing system can embed SVG, and 2) you have the desired font available for SVG to use. I don’t know how serious these constraints are (particularly number 2) in practice. And of course, the source I give is oriented towards HTML/CSS (browsers and their converters to other formats), and not something like LaTeX.

Certainly, I welcome someone re-doing the examples I gave using SVG. Even on-the-fly creation of embeddable pixel graphics (.png, etc., created at the proper scale) are welcome. The whole point of this exercise is to come up with ways other than embedding pixel graphics created at a fixed size into text. They should be seamless (i.e., the viewer can’t tell that they’re not normal text, even under magnification).

Also, don’t forget that not all special punctuation is available under all fonts. For example, while ©, ®, and ™ are widely available, symbols such as ℠ and ℗ may not be.

Posted on 2017-Mar-02 at 04:58:21 by sciurius

The nice thing about SVG (and EPS) is that you can export text as vectorized glyphs so you do not need the font when rendering.

Posted on 2017-Mar-07 at 16:34:58 by Phil

@sciurius, you and others are quite welcome to contribute examples of using SVG code to make logos and rare accented letters for HTML, PDF, and other uses that cleanly scale and are without artifacts. I didn’t mean to imply that only HTML+CSS are permitted, although I would prefer that intermediate file graphics formats be avoided. Graphical logos that cleanly scale would be good, too. The ideal is that a viewer of a page (HTML, PDF, printed) would not notice anything out of the ordinary for a LaTeX logo or an n+umlaut in text, no matter what scale they appear at. How that looks/is handled at the source level is another matter, but should not involve OS-dependent operations (e.g., creating a graphics file on the fly) or anything else that breaks the smooth flow of turning text into a presentation. It is permissible to invoke special code (such as my PHP functions to create HTML and CSS) when processing the source.

Posted on 2017-Mar-08 at 14:46:45 by sciurius
Last update on 2022-Mar-17 at 16:07:00 by Phil

We need to distinguish between font glyphs and arbitrary images.

To create a n plus diaresis ( n̈ ), you can use n̈.

Creating graphics (images) to use as custom glyphs will not work, at least not easily.

Graphical logos e.g. in SVG should display correctly and scale nicely.

Attachments: scale.html and logo-icon.svg

Posted on 2017-Mar-08 at 18:36:45 by Phil

Nice examples of using a combing diacritic (a diaresis) with a letter (n) and an image that scales. Could you please show an example of a LaTeX logo? Can that be done with the the 5 letters in the word, or do you have to describe the outline of each letter (pure graphic)?

Posted on 2017-Mar-09 at 07:41:53 by sciurius

Strictly speaking it should be typeset using the Computer Modern font. Leaving that aside (as it often happens ;) ) you get something similar to:

Posted on 2017-Mar-09 at 10:02:21 by Phil

Nice job — much simpler than mine (I don’t know why I didn’t try drawing bare letters rather than putting them in divs. Force of habit, I guess.). I adjusted your example to use Times New Roman. That’s available for free on Windows, but I don’t know about Macs or Linux. Is there a CM TTF font family available for Windows use?

Also notice that I use Tau, Epsilon, and Chi instead of T, E, and X, as some fonts might have minor differences in appearance. The “A” seems to wander around a little bit when zooming in (Firefox), so that may be an issue.

Well, I’ve never really liked CM. There’s just something “off” about it for me. I’ve seen the TeX/LaTeX logos rendered in many typefaces (such as in books on the subject), so I can’t say whether there’s an “official” face to use. By the way, using “sans-serif” (on Windows/Firefox), it’s quite nice looking.

Three other items in this thread:

While I can use a combining diacritic like &x308; for a diaresis (umlaut), what about other accents that might not be available in a particular font? For example, to write Polish text, I would need an L + /. Would that have to be done graphically (e.g., SVG)?
How about using text in general within SVG, such as in this page? Can the LaTeX logo, for instance, be done almost as easily as with straight HTML+CSS? You might want to do a mixture of SVG text and graphics, such as to build a character such as L + /.
So much for HTML (browser display). What about PDF or image output? As long as you can find an adequate HTML-to-PDF converter, that understands and correctly renders fancy CSS and SVG, it could be done that way. How about with LaTeX itself?

Posted on 2017-Mar-10 at 07:47:40 by sciurius

“ Is there a CM TTF font family available for Windows use?

CM is a public domain font. You really did not type “CM TTF” into Google :) ?

“ Also notice that I use Tau, Epsilon, and Chi instead of T, E, and X

Why? Both the TeX and LaTeX logos use ordinary glyphs, not greek ones.

“ ... to write Polish text, I would need an L + /.

Just type Combine L / and you get Ł.

“ How about using text in general within SVG, such as in this page?

I don’t see the problem/challenge. I use Inkscape for SVG drawing, and you can use fonts and texts as usual. And you have the option to convert the texts as paths (splines) so you do not need the actual font anymore to show the results. Especially handy for logos. I assume other SVG drawing tools can do the same.

Attached a fontless SVG of LaTeX in an arbitrary font.

“ How about with LaTeX itself?

I have no idea. I stopped being a TeXnician 10 years ago. Nowadays there a more modern variants like XeTeX that can deal with unicode, scalable fonts, pdf, and much more. So I assume there are plenty of ways to do this with *TeX.

Attachment: drawing.svg

News:

A Thought…

Compositing logos and accented letters