[Phil]

Pointer to article: Compositing Logos and Accented Letters, a discussion on creating logos, new letters, and unusual accents using normal text and CSS.

[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 <nobr>…</nobr> tag set:

Code: [Select]

This is <nobr>Spi<?php nUml(); ?>al</nobr> Tap!However, the <nobr> 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 <nobr> in the code.

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

[sciurius]

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

[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.

[sciurius]

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

[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.

[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.

[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.

[sciurius]

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.

[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)?

[sciurius]

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

Code: [Select]

<style>
.latex sub {
  font-size: 1em;
  vertical-align: -0.5ex;
  margin-left:    -0.1667em;
  margin-right:   -0.125em;
}
.latex sup {
  font-size:       0.85em;
  vertical-align:  0.15em;
  margin-left:    -0.36em;
  margin-right:   -0.15em;
}
</style>

<span class="latex">L<sup>A</sup>T<sub>E</sub>X</span>


[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?

Code: [Select]

<style>
.latex { font-family: "Times New Roman",serif; }
.latex sub { /* for Epsilon */
  font-size: 0.85em;
  vertical-align: -0.5ex;
  margin-left:    -0.166em;
  margin-right:   -0.070em;
}
.latex sup { /* for A */
  font-size:       0.60em;
  vertical-align:  0.41em;
  margin-left:    -0.42em;
  margin-right:   -0.10em;
}
</style>
 ...
<span class="latex">L<sup>A</sup>&Tau;<sub>&Epsilon;</sub>&Chi;</span>
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?

[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.