target-content() function

[bertfrees]

Alternatively the function could be called ‘target-move()’ or ‘target-pull()’ or ‘content(<url>)’.

‘target-move()’ and ‘target-pull()’ were removed from [CSS3GCPM]. ‘target-content()’ is a value for the ‘content’ property in [PRINCE].

The function would get the contents of an element including structure, rather than only the text value which ‘target-text()’ returns. Presumably this would work like move-to (also deprecated): it doesn't change the DOM, and elements and pseudo-elements that have been moved inherit from their position in the DOM, not from their new position.

This function would be useful for flowing footnotes to the bottom of the page on which the footnote reference occurs.

Related issues:

• [ ] https://github.com/snaekobbi/braille-css-spec/issues/3
• [ ] https://github.com/snaekobbi/pipeline-mod-braille/issues/12

[josteinaj]

@bertfrees target-content() is used for notes in NLBs stylesheet. I'm having some trouble styling the content that are pulled in with it. Then I saw this issue; is it not implemented yet? Maybe it currently just works the same as target-text()?

[josteinaj]

Sorry, seems to work. It's just a bit confusing where to put the styles (together with content: target-content(attr($refattr)); or on a separate rule matching the element) so I have to experiment a bit.

[bertfrees]

It's like described above:

elements and pseudo-elements that have been moved inherit from their position in the DOM, not from their new position

So if you have a note:

<aside epub:type="note" class="notebody" id="note001"> <p> this is a note </p> </aside>

...and you want to move it to the position of the noteref:

<a epub:type="noteref" class="noteref" id="noteref_1" href="#note001">*</a>

...like this:

a[epub|type~=noteref]::alternate {
    display: block;
    content: target-content(attr(href));
}

...you need to put the styles of the newly generated block box in the above rule, but the styles of the nested p needs to be put in a aside > p rule.

[josteinaj]

Right. If I want to style the text content of the note, such as

&::before { content: '⠠'; }

it seems that I have to do that in the

::alternate { content: target-content(attr(@href)); ... }

part though. And I'm unable to add that text conditionally based on whether or not there are <p> children in the note (I tried &:not(:has(*)) { content: '⠠'; } and similar).

I ended up wrapping inline content (i.e. text nodes) in <p> elements using XSLT (pre-processing.xsl), so that I don't have to handle the case with text nodes as direct children of the note.

[bertfrees]

Yes. ::before and ::after content is deliberately not copied.

I'm unable to add that text conditionally based on whether or not there are <p> children in the note

Hmm, that will indeed not work. Your XSLT solution is probably the easiest way to solve this.