Texinfo CSS
100 Bytes of css to look great
Recently I came across the post from Swyx https://www.swyx.io/css-100-bytes and wanted to test if this minimum CSS could be applied to some of our default Texinfo reference files.
The CSS
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}
h1,h2,h3,h4,h5,h6 {
margin: 3em 0 1em;
}
p,ul,ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}
dl.def:not(:nth-child(2)) {
border-top: 1px solid rgb(229, 231, 235);
padding-top: 1.5rem;
}
Applied to a .texi reference file
The CSS can be either linked to, or included into the produced HTML output.
This can be defined in many different ways, but if the project uses the
GNU automake tools, an entry
simliar to the below example can be added to the Makefile.am of the
right subfolder.
AM_MAKEINFOHTMLFLAGS = --no-split --css-include=style.css
info_TEXINFOS = application.texi
application_TEXINFOS = \
gpl.texi \
changelog.texi \
see-also-note.texi \
style.css
Of course those tools are not mandatory and it is possible to generate the output directly from the command line, in case the documentation is not yet part of your building chain. An example could be:
makeinfo --html --no-split -o application.html --no-header --css-include=style.css application.texi
For a simple .texi file like the following:
\input texinfo @c -*-texinfo-*-
@setfilename testmanual.info
@set VERSION 1.0
@settitle Title
@documentlanguage en
@documentencoding UTF-8
@ifnottex
@node Top
@top Manual example
@end ifnottex
@node function references
@chapter Function references
@section Account
@deftp {Enumeration Type} account_status
State of an account
@example
ACTIVE SUSPENDED
DISABLED LOCKED
@end example
@end deftp
@deftp {Data Type} account
onec ullamcorper neque at elementum malesuada. Aliquam mattis tortor
eget ultrices ultricies. Donec suscipit metus dolor, nec interdum enim
lobortis in. Praesent id finibus tellus.
@smallexample
@group
struct account @{
char *firstname;
status enum account_status;
...
@};
@end group
@end smallexample
@end deftp
@deftypefun gboolean account_is_active (const account *@var{a})
The function returns if the account is active
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non dictum
eros. Etiam ornare massa ipsum, varius tincidunt justo eleifend non. Nam
feugiat mattis est, vitae congue arcu viverra ac.
Parameters:
@indentedblock
@table @var
@item a
The account of the user which uniquely identifies the user across all
the different modules.
Required.
@end table
@end indentedblock
Returns:
@itemize @minus
@item
TRUE, the account is active
@item
FALSE, the account is not active (disabled, suspended, quarantined ...)
@end itemize
Example:
@example
account *a = NULL;
a = db_get_account (db_handler, username);
account_is_active (a);
@result{} TRUE
account_free (a);
@end example
@end deftypefun
@deftypefun void fun2 (int @var{val1}, int @var{val2})
Duis ullamcorper ultricies diam in iaculis. Nullam volutpat interdum
volutpat.
Mauris justo arcu, aliquet in sem rutrum, dignissim interdum ante.
Suspendisse interdum placerat massa sed commodo. Sed commodo velit
imperdiet pulvinar dictum. Suspendisse consequat volutpat condimentum.
Parameters:
@indentedblock
@table @var
@item val1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@item val2
Phasellus et diam vitae mi facilisis tincidunt et sed velit.
@end table
@end indentedblock
@end deftypefun
@node style
@chapter Style
@section elements
@cindex list, enumerated
@cindex list, itemized
@cindex lists
@subsection Lists
Itemized:
@itemize
@item
Lorem ipsum dolor sit amet
@item
Consectetur adipiscing elit
@item
Integer molestie lorem at massa
@item
Facilisis in pretium nisl aliquet
@item
Nulla volutpat aliquam velit
@end itemize
Enumerated:
@enumerate
@item
Lorem ipsum dolor sit amet
@item
Consectetur adipiscing elit
@item
Integer molestie lorem at massa
@item
Facilisis in pretium nisl aliquet
@end enumerate
@node Version History
@appendix Version History
@table @dfn
@item Version 1.1.0, August 09, 2022
@itemize
@item
Quisque non imperdiet nisl. Morbi luctus dictum libero at
ultrices. Vestibulum iaculis porta pulvinar. Aliquam aliquam mattis dui.
@end itemize
@end table
@bye
Of course any color or style is subjective to the author, I personally find attractive to the eye the following examples, when the CSS is applied.
Where even the lists are easy to read.
