How to assign a specific font to a word or line of text?

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

How to assign a specific font to a word or line of text?

Chris
This post was updated on .
Hi there,

I'm new to asciidoctor and didn't found an answer in the asciidoctor documentation (or overlooked it) to following question:

How can one assign a specific font to a word or line of text?

Regards,
Chris
Ted
Reply | Threaded
Open this post in threaded view
|

Re: How to assign a specific font to a word or line of text?

Ted
I would use CSS classes to do this. You can specify a class in a span using Asciidoctor like this.

[SingleSentence]#This is a sentence.#

This will create a HTML span tag around the sentence with the class "SingleSentence". Then use a docinfo.html file to insert the fonts you want to use for this class.

e.g. class.adoc

= Using CSS Classes to Assign a Font
:docinfo1:

[SingleSentence]#This is a sentence.#

Change the font for this [SingleWord]#word# but none others.


Then create a second file named docinfo.html in the same folder.

e.g. docinfo.html
<style type="text/css">
    .SingleSentence {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: darkgoldenrod;
    }
    
    .SingleWord {
        font-family: 'Times New Roman', Times, serif;
        color: green;
    }
</style>



- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: How to assign a specific font to a word or line of text?

Chris
This post was updated on .
Hi Ted,

thank you for your detailed code example.

First it didn't work. But when I changed the second line in class.adoc to ":docinfo1: docinfo" (without quotation marks) it works.

Can you lead me to the topic or paragraph in the asciidoctor documentation where this handling is explained? Or do you know any other internet site where this type of text formating is shown?


Ted
Reply | Threaded
Open this post in threaded view
|

Re: How to assign a specific font to a word or line of text?

Ted
Chris, I'm glad you got it working.

Here's some clarification for others.

Make sure there is no empty lines after the title. This will not work:

= Title

:attributes:


regarding docinfo, I was telling you old information.

The correct way to reference the docinfo.html file is to add this to the top

= Using CSS Classes to Assign a Font
:docinfo: shared

This tells Asciidoctor to inject the contents of the docinfo.html file into the head tag of the class.html file. That's the part that didn't work and the empty line is the most likely cause.

When it works correctly, then if you view source of the class.html page you will see:
...
<head>
<title>Using CSS Classes to Assign a Font</title>
<link rel="stylesheet" href="https://fonts.googlea...
<style>...</style>
<style type="text/css">
    .SingleSentence {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: darkgoldenrod;
    }

    .SingleWord {
        font-family: 'Times New Roman', Times, serif;
        color: green;
    }
</style>
...
</head>

...

<div id="content">
  <div class="paragraph">
    <p><span class="SingleSentence">This is a sentence.</span></p>
  </div>
  <div class="paragraph">
    <p>Change the font for this <span class="SingleWord">word</span> but none others.</p>
  </div>
</div>

Here's the latest Asciidoctor documentation on:
Docinfo file

- Ted @TedAtCIS
Reply | Threaded
Open this post in threaded view
|

Re: How to assign a specific font to a word or line of text?

Chris
This post was updated on .
Ted,

our posts overlapped. Meanwhile I edited my post above because I found the cause.

Your new code does work:

:docinfo: shared

I don't know why but my randomly found solution works also:

:docinfo1: docinfo

Thank you!