Asciidoctor :: Discussion

Examples of CSS changes for title page images, or CSS advice?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

5 messages Options

oddhack

Examples of CSS changes for title page images, or CSS advice?

For years, people have been asking how to do title page images in HTML output, and for years, the answer has been to modify the CSS. OK. Is there an extant example where people do this? If there is, can it be wired into the documentation in some fashion? I am not at all sophisticated with CSS and so far, the only thoughts I've had are to

1. Use #header::before - which does not appear to allow any styling or control over size of the inserted content, just scales it to whatever the width of the header division content happens to be.

2. Alter the header division style itself to use a background-image. What I don't understand here is, given the image is SVG and of unknown pixel size, how can I then set the other CSS properties so the actual <h1> title element appears below (or above) the background image, no matter what screen size it's being displayed at, rather than in the middle of it.

3. If I wanted to define my own style insead of altering the stock #header CSS, I have no idea how to apply that to a header element. '[mystyle]\n= Title' is ignored. '[mystyle]= Title' or '= [mystyle]#Title#' works, but only applies the style to the <h1> or <span> element, not to the entire <div id="header">.

4. Is there any way to parameterize the title image in the asciidoctor source and have that propagate through to the CSS, that's integrated into the asciidoctor pipeline itself? IOTW to inject {title-logo-image} into the altered CSS style, so that the same style file can be used with multiple source documents (it's possible to rewrite the CSS before running asciidoctor, or rewrite the output HTML afterwards, but that's a nasty way of doing it).

Jon

msc

Re: Examples of CSS changes for title page images, or CSS advice?

See https://github.com/KhronosGroup/KTX-Specification/blob/master/docinfo.html for one way of doing this. This puts 2 .svg images before the <h1> element.

Regards

-Mark

On Dec 18, 2020, at 1:33 PM, oddhack [via Asciidoctor :: Discussion] <[hidden email]> wrote:

For years, people have been asking how to do title page images in HTML output, and for years, the answer has been to modify the CSS. OK. Is there an extant example where people do this? If there is, can it be wired into the documentation in some fashion? I am not at all sophisticated with CSS and so far, the only thoughts I've had are to

1. Use #header::before - which does not appear to allow any styling or control over size of the inserted content, just scales it to whatever the width of the header division content happens to be.

2. Alter the header division style itself to use a background-image. What I don't understand here is, given the image is SVG and of unknown pixel size, how can I then set the other CSS properties so the actual <h1> title element appears below (or above) the background image, no matter what screen size it's being displayed at, rather than in the middle of it.

3. If I wanted to define my own style insead of altering the stock #header CSS, I have no idea how to apply that to a header element. '[mystyle]#= Title# is ignored. '= [mystyle]#Title#' works, but only applies the style to the <h1> element, not to the entire <div id="header">.

4. Is there any way to parameterize the title image in the asciidoctor source and have that propagate through to the CSS, that's integrated into the asciidoctor pipeline itself? IOTW to inject {title-logo-image} into the altered CSS style, so that the same style file can be used with multiple source documents (it's possible to rewrite the CSS before running asciidoctor, or rewrite the output HTML afterwards, but that's a nasty way of doing it).

Jon

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/Examples-of-CSS-changes-for-title-page-images-or-CSS-advice-tp8398.html

To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Steve Litt

Re: Examples of CSS changes for title page images, or CSS advice?

In reply to this post by oddhack

On Thu, 17 Dec 2020 21:33:42 -0700 (MST)
"oddhack [via Asciidoctor :: Discussion]"
<[hidden email]> wrote:

> For years, people have been asking how to do title page images in HTML
> output, and for years, the answer has been to modify the CSS. OK. Is
> there an extant example where people do this? If there is, can it be
> wired into the documentation in some fashion? I am not at all
> sophisticated with CSS and so far, the only thoughts I've had are to

You can download and disect my free book, "Troubleshooting: Why
Bother", at http://www.troubleshooters.com/bookstore/twb.htm .

SteveT

Steve Litt
Autumn 2020 featured book: Thriving in Tough Times
http://www.troubleshooters.com/thrive

oddhack

Re: Examples of CSS changes for title page images, or CSS advice?

Hi Steve,
Is your book written in asciidoctor markup? If so, is the doc source / build toolchain available to inspect? What I'm getting at here is less the general question of writing CSS, than specifically how to inject and modify it when producing asciidoctor HTML output. Thanks.
Jon

Steve Litt

Re: Examples of CSS changes for title page images, or CSS advice?

On Sat, 19 Dec 2020 21:40:02 -0700 (MST)
"oddhack [via Asciidoctor :: Discussion]"
<[hidden email]> wrote:

> Hi Steve,
> Is your book written in asciidoctor markup?

No, I write it in HTML and ran a self-developed Python program to turn
it into an eBook.

> If so, is the doc source
> / build toolchain available to inspect? What I'm getting at here is
> less the general question of writing CSS, than specifically how to
> inject and modify it when producing asciidoctor HTML output. Thanks.
> Jon

Here's my take on toolchains' handling of CSS...

I personally think that each output format (ePub, PDF, HTML, etc)
should have its own CSS. What looks good on ePub can look horrible in a
PDF, and vice versa.

I haven't yet created an entire book in AsciiDoctor, but when I do,
I'll self-write the CSS to get it exactly how I want in the ePub. That
self-writing will probably consist of modifying every CSS style, so I'm
glad the toolchain gives me a best-guess CSS file to modify.

SteveT

Steve Litt
Autumn 2020 featured book: Thriving in Tough Times
http://www.troubleshooters.com/thrive