Login/Register
Is there any way to change the text size (font size) of specific blocks when you using asciidoc?
Asked Answered
Solved text-sizeasciidocasciidoctor
S

4

12

I need your help.

Now I am using AsciiDoc and AsciiDoctor to create some manuals.

I want texts smaller on some specific blocks, for example wide table, wide list, and so on, but not want main texts smaller. Especially I need to make texts of wide tables smaller as my customer requests so.

Is there any way?

Spongioblast answered 18/8, 2017 at 8:34 Comment(0)
K
7

You mention lists and tables... About lists, it can't be done as stated in AsciiDoctor Documentation:

Unsupported Complex AsciiDoc markup is not permitted in attribute values, such as:

  • lists

  • multiple paragraphs

  • other whitespace-dependent markup types

As you can see, there it mentions multiple paragraphs, so while @EhmKah answer is a correct way to set a custom styling block, it won't be rendered as expected in a table/list as it's multi-paragraph.

The Built-in CSS class syntax is the way to go [small]#any phrases# But in order to make this work in a table, you must set the cell type with a specifier in this case, the AsciiDoc specifier denoted by a This means the cell (or column) will render supported AsciiDoc statements, attributes, etc.

Here's a working example:

[frame="none",grid="none"]
|====
a| image::images\logo.png[] a|[.small]#Autor: {author}#
|====

If you have tons of rows/columns, you don't have to manually apply the a to all of them. You can set the columns you need this behavior this way:

[cols="1a,2a",frame="none",grid="none"]
|====
| image::images\logo.png[] |[.small]#Autor: {author}#
|====

You can check its documentation for more about Column Formatting and you can check the Rendered table with variable widths and alignments sub section for more about AsciiDoc (a) and other specifiers.

Khotan answered 21/9, 2018 at 17:4 Comment(1)
thanks for nice detailed answer, very helpful. (and sorry for my late marking answered, I was mis-remembered that I'd already set) – Spongioblast
B
3

docinfo.html + --attribute docinfo=shared

You can drop your CSS modifications into a file called docinfo.html:

<style>
/* Your custom CSS. */
</style>

and then build with:

asciidoctor --attribute docinfo=shared README.adoc

and that makes Asciidoctor 2.0.10 place docinfo.html at the bottom of the <head> element.

So you can override most of the default Asciidoctor style from there.

Then it's just a matter of understanding the generated HTML and previous style definitions to override them.

For image specifically, see also: How to set a custom image height for an image in Asciidoctor?

Bring answered 31/7, 2020 at 10:58 Comment(0)
I
3

When you use a theme file, you can add a role to it like this:

role:
  mycustomfont:
    font-color: #333
    font-size:  10

Now you can reference your newly created role right from your table cell:

a|[.mycustomfont]# some text #
Invert answered 18/12, 2020 at 19:52 Comment(1)
very good idea but could you provide fully working example? – Kaisership
E
0

I read something about

example-code

[small]
----
should be rendered in smaller font.
----

[%autofit]
----
really long text that doesn't want to fit on a single line with the default font size, so we'll make it shrink to fit.
----
Extrusive answered 19/8, 2017 at 8:15 Comment(3)
Although I tried [small] and [%autofit] for table blocks, they couldn't work... And about [small], the way you wrote didn't work at all. [small]#any phrases# became smaller font. – Spongioblast
@Spongioblast could you please repeat your comment as an answer and mark your question as answered? – Acotyledon
About the answer, that's a custom style block and about @marcoil comment that's a Built-in CSS class syntax. Both are correct but to be able to use these in a table, please take a look at my answer. – Khotan

© 2022 - 2024 — McMap. All rights reserved.