(Pseudo) Summer Stop

On this time of the year:

  • My readers go on holidays
  • My usual students go on holidays
  • My unusual students gather for the summer courses

So I’ll take a break on publishing articles. If I survive to the hot weather, to my (unusual) students and to that crazy idea of moving on with two crazy projects, I’ll come back on September.

So take care of yourself and buy new sun screen (it’s almost certainty that that one from last year is not valid any more). Have a nice holiday!


Playing with “span” | Drop Caps in a WordPress article

Clearly if we completely own a site and have access as administrator to it we’ll be able do define our own CSS styles and in that way we’ll be able to build every format we want on our pages… But only if we “have the power” (and the will) to do so.  But that does not mean that we are hopeless on a “free site” (or when we do not want to dig on CSS files). In fact, on previous articles we’ve seen a couple of tricks like how to use Text On Small Caps and «floating definitions» or how to write the TEX, LATEX, XƎTEX and LYX logos, and here we can see Drop Caps at work.

Well, today’s trick, like the others, needs the use of the HTML editor on WordPress to write some code. I’ve found this trick on the following page: How do I add a Drop cap text (html or image) to my website. Basically, to create the first Drop Cap I’ve wrote

<span style="float: left; color: #d4d4c7; font-size: 85px; 
line-height: 39px; padding-top: 3px; padding-right: 3px; 
font-family: serif;">C</span>
<span style="font-variant: small-caps;">learly</span> if we...

IMPORTANT NOTE: For presentation needs I’ve broke the code on several lines, but it’s better to keep everything on the same line.

The only remaining thing is to play a bit with HTML colours, the sizes of the drop cap and the line spacing. The code in not “comfortable”, that’s true, so use it only for special situations.

That or buy a full plan to work on the CSS code.

Announcing Two Projects (Maybe)

Everything started more than a decade ago: a series of articles I wrote in Spanish for a now defunct digital magazine started to grow beyond any expectation.

The articles touched two topics. The first topic was the proper use of OpenOffice.org Writer (remember: it was a long time ago). The second topic was a quick presentation of a program with the ambitious aim of making LATEX easy: LYX.

On 2010 those articles about Writer became a book (in Spanish) named after the first article I’ve wrote about the topic: “Domando al escritor” (Taming the writer). I lost count of how many times I updated the book and expanded its contents (now it also talks about Draw, Math and Chart). On 2016 a new edition devoted to LibreOffice Writer was released. Now, on 2018, I decided to rewrite it (almost) from scratch and that maybe, just maybe, I’ll try to annoy my dear English readers with a home made translation.

The articles about LYX became even more articles in my personal blog (in Spanish) and on 2017 everything became a new book about this program, about XƎTEX and about how to properly use OpenType there called “LYX, la otra forma de escribir” (LYX, the other way of writing: the name also comes from the first article I wrote about the topic). That book is ready (in Spanish, I mean) so it only needs to be translated into English. Somehow.

So yeah, these are the two new projects: once the new Spanish edition of the book about Writer is ready I’ll translate it into English (maybe), and once I get enough strength I’ll also translate the book about LYX (maybe).

At least I have a first version for both covers:




Before someone protest: As you can see by the fact that Glamdring is glowing blue, I’m quoting the Books, never the movies, so do not insist: it’s cannot.

The Spanish name of the book about Writer is a sort of (bad) pun and would be best translated as “Taming the Writer”, but it happens that there is an English book called “Taming Writer” so to avoid confusions I decided to translate it as “To Tame a Writer.” Let me know in the comments if it makes sense.

And here we are: two concrete, difficult and real projects that I have no idea when, or even if, will be achieved. Let’s see what comes out of all this.

Sukhumala: a Typeface Inspired by Goudy

Goudy Old Style (or simply “Goudy”) indicates an humanist serif typeface originally designed by Frederic W. Goudy on 1915. With some “oddities” (rhombic dots, a highly “typographical” Q, a fi ligature where i’s dot remains separated, etc.) is a design with high readability that’s really nice to the eye.

There are several revival attempts to bring this typeface to the digital era and today I’ll talk about one that’s really good and has a free license:

Sukhumala, by Bhikkhu Pesala

There is also a “Hand Tooled” version (regular only) with almost the same OpenType feature set

A great open source font, ready to accept any challenge in many languages.

Playing with “span” | Small Caps and “definitions”

Let’s play a bit more with “span” environments on our WordPress posts. Today I’ll talk about how to set up Text On Small Caps and how to add “Floating Definitions“.

For both things we’ll need to go to the HTML editor. For the first one we need to write something like this

<span style="font-variant: small-caps;">Text On Small Caps</span>

Coming back to the visual editor, the Small Caps will be in action.

In order to add what I call Floating Definitions, the code to use is

<abbr title="A short text that appears whenever the cursor is over 
the selected object">Floating Definitions</abbr>

And that’s it.

NOTE It’s possible to use OpenType tags on HTML documents, but the problem is the font used to display the page. If the local font does not have that feature it will fail to show the trick, and Google fonts servers or similar resources tend to remove all “unnecessary” (for them) features so it’s quite possible that most OpenType tags would fail miserably. Be careful 😉

More information about small caps on HTML

[wikipedia]Small caps in Cascading Style Sheets

CSS – Tricks | font-feature-settings

I do not remember from where did I get the “abbr” tag thing: it was on an old text file with a list of things to write about.

Writer + XeTeX? TeXMaths!

Anyone that ever tried Math, the equation editor on LibreOffice, knows that it’s, at best, limited, and at worst, hopelessly limited. But while we, common mortals, wait for the hero that rewrites Math from scratch, there is still hope for getting perfect mathematical expressions on Writer (or Draw, or Impress):


This extension for LibreOffice is an editor that takes a LATEX expression, compiles it and creates a SVG picture that can be included on any document. Since version 0.46 it also support XƎTEX and unicode-math, so it’s also possible to choose the mathematical font!

The extension also provides macros for equation numbering.

Of course, the extension needs a working LATEX distribution like TeXLive or, if you are on the dark side of the OS Wars, MikTeX. Just be sure that dvisvgm package is also available, and that’s a recent version: you need at least TeXLive 2017 or similar.

When installed, a new toolbar is added. You need to click on the wrench/spanner (choose your side of the Atlantic) to set it up, indicating the path to the binaries. If you don’t mind the Spanish screenshots (I’m feeling lazy these days… let’s say that it’s a way to show that the extension has been localized on several languages):

It’s in Options tab where you can choose to use XƎTEX

Now you just need to launch the application, edit the preamble

write your expression

and enjoy!

That’s it. I’ll let the reader play with the numbered equations and all the other options this awesome extension offers.

Playing with “span” | LaTeX, LyX and XeTeX logos on WordPress

On this blog I talk a lot about LYX, LATEX and XƎTEX, indicating every now and then the “TEX boxes” and related arguments. Today’s article is to show how I build the corresponding “logos” without using those programs, just with pure HTML.

On HTML, through the use of “span” environments it’s possible to pass parameters to the text, modifying things like size, vertical position, kerning, etc. But of course we need to know what to change.

Some time ago I discovered a page on the LYX wiki that indicates how to build the logo using LATEX. This is the code


Here we see that the Y that comes after the L have a negative kerning and it’s lowered, with the X also with negative kerning. Translating this into HTML (you must introduce this on the HTML editor, not on the “visual” one!) we get

L<span style="vertical-align: -0.25em; margin-left: -0.125em; 
   margin-right: -0.125em;">Y</span>X

which gives us what we want: LYX.

IMPORTANT NOTE: For presentation needs I’ve broke the code on several lines, but it’s better to keep everything on the same line. The same is valid for the following code examples.

Seeing that this works, it’s only a matter of trial and error to get


T<span style="vertical-align: -0.5ex; margin-left: -0.1667em; 
   margin-right: -0.125em;">E</span>X


L<span style="font-size: 70%; margin-left: -0.36em; 
   vertical-align: 0.3em; line-height: 0; 
   margin-right: -0.15em;">A</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

The XƎTEX is more difficult, though. To get the “inverted E” I’ve used the character Ǝ, U+018E, and that means that the following code should work

X<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">Ǝ</span>
   T<span style="margin-left: -0.1667em; vertical-align: -0.5ex; 
   line-height: 0; margin-right: -0.125em;">E</span>X

And I’d said “should” because not all fonts offer this character: if the character is missing the browser will use a font substitution, and the careful alignment will be lost. On this site I use Vollkorn which is really complete, so there is no problem, but you always need to pay attention to those details.