On 08/26/2018 10:05 PM, Leif Halvard Silli wrote:
The XMLmind WYSIWYG renderer (in both browser emulation view and
semantic view) now (for some time - I am not sure for how long) supports
CSS generated content. This is very nice. I for instance use it to
enumerate footnotes and headings.
However, I have a problem using this feature together with h1-h6
elements in HTML:
For an h1-h6 element that is the first child of a section/article/aside
element, then XMLmind will insert a small triangle before the content of
those elements. By pressing that triangle, you can open/close that
particular element as if you worked with an outliner.
This is a very nice feature. However, it seems taht the feature somehow
interferes with CSS generated content. Because a style such as
|h1::before{content:/*etc*/;} |
does not work whenever the triangle is present. I worked around it by
using this:
|h1::after{content:/*etc*/;} |
However, this is not very elegant.
Indeed.
Currently, it seems I would have to
insert an empty element, like <span class="enum"></span> as the first
child of h1-h6 elements, and let CSS enumerate that element instead.
No. See below.
Are there other options for users? Or must/can this be solved by
some enhancement of XMLmind?
In order to customize a CSS stylesheet, you must first *read* and
*understand* the source of this stylesheet in order to determine how
you'll implement your customization.
<XXE_install_dir>/addon/config/xhtml/css/xhtml.css contains:
---
section > h1:first-child:before,
section > h2:first-child:before,
section > h3:first-child:before,
section > h4:first-child:before,
section > h5:first-child:before,
section > h6:first-child:before {
content: collapser() " ";
}
---
(collapser() documented in
http://www.xmlmind.com/xmleditor/_distrib/doc/csssupport/collapser.html)
Therefore if you want to AUGMENT the generated content (e.g. by adding
an image) to the existing generated content, you must specify:
---
section > h1:first-child:before,
section > h2:first-child:before,
section > h3:first-child:before,
section > h4:first-child:before,
section > h5:first-child:before,
section > h6:first-child:before {
content: collapser() " " url(my_image.png) " ";
}
---
--> If you want to REPLACE the generated content (e.g. by the heading
name), you must specify:
---
section > h1:first-child:before,
section > h2:first-child:before,
section > h3:first-child:before,
section > h4:first-child:before,
section > h5:first-child:before,
section > h6:first-child:before {
content: element-name() " ";
}
---
(element-name() documented in
http://www.xmlmind.com/xmleditor/_distrib/doc/csssupport/element-label.html)
--> If you want to SUPPRESS the generated content, you must specify:
---
section > h1:first-child:before,
section > h2:first-child:before,
section > h3:first-child:before,
section > h4:first-child:before,
section > h5:first-child:before,
section > h6:first-child:before {
content: "";
}
---
('content: none;' should work too. See
https://www.w3.org/TR/CSS2/generate.html#content)
--
XMLmind XML Editor Support List
xmleditor-support@xmlmind.com
http://www.xmlmind.com/mailman/listinfo/xmleditor-support
