Each node and each style including default style, detail style and note style can specify their CSS sheet.
It allows very flexible formatting of HTML and Markdown content.
For notes and details CSS is taken from corresponding style or from default style.
However user defined CSS styles are applied on top of previously active styles so that there is no need to set this option if you are already satisfied with the formatting.
CSS editor has also got a preview.
I decided that because of many formatting properties available in CSS and covering fonts, colors, but also paragraph spacing, CSS editor can not be replaced by helper styles or any other simplification.
I am not sure how many of you find it useful.
Any feedback is highly appreciated.
Regards,
Dimitry
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hy Dimitry.
CSS seems powerful. But is it easy to learn? In the old times of the www,
and html, those CSS seemed very complicated? Is that still the case? How do
we learn about such thing?
@macmarrum, I think that the community voiced an idea a few months ago that anyone who made a feature request that was implemented would be responsible for documenting use of the feature. I am wondering whether you could compile the explanatory posts you have already made into a basic documentation of the CSS editor feature that we could add to the docs?
Feedback:
1. Dimitry, I suggest changing the -> button to read Refresh CSS Preview above the arrow so the meaning is clearer.
2. Currently, if I make H1 a certain font size in the CSS editor, but make no other formatting settings, H1 still previews as bold rather than normal. I'm sure this has a technical explanation but it is confusing, because it suggests that the CSS is changing a still-hidden group of CSS default values. It would make more sense to me if FP ignored any default hidden Markdown formatting settings if the user manually adds any CSS in the editor. Or, the CSS editor could be pre-populated with the default settings that are being used to style Markdown as shown in the preview.
3. I don't understand why the Preview text is centered, since the node text doesn't seem to be centered.
4. It will be easier to understand how CSS interacts with FP if the formatting elements that are defined by CSS are grayed-out in the Format UI. Otherwise users can set formatting in the UI and will see no effect.
5. I would add an indicator somewhere in the Format Panel UI, perhaps over "Node Color", telling the user whether the selected node is being formatted in part by CSS.
An important question: Dimitry said that CSS editor cannot be replaced with something simpler because CSS can indicate a wide variety of properties including paragraph spacing. But here@macmarrum lists exactly 8 properties as the only ones that would be affected by the CSS, writing: "No one offered a functionality to format nodes with CSS, only HTML/Markdown. In other words, only the 8 formatting properties mentioned above are interchangeable with CSS." Which is correct? Or are these views not actually in conflict?
Does the CSS applies to all Core Text formats or just some of them? What about LaTex or other formats?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Feedback:
6. I think the CSS should be included with templates in the same way normal styles are in terms of followed and associated templates. If a change is made to the CSS of a style in a followed template, that change should propogate to the map. And, if a change is made to the CSS of a style in a map, and the style is "Made default" using that action in the format panel, then the CSS change should be applied to the "maps based on template" indicated in the format panel.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Bug of some sort: I set a map to follow a template that has CSS. For the map, no CSS appears in the Style Editor. There is no bold set for any style. But when I select a node in the map, and change to edit mode, the text in edit mode turns bold. The bold remains after leaving edit mode.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Feedback:
7. In the style editor, there should be an indicator next to the styles that are using CSS formatting so the user doesn't have to select every style and manually open the CSS editor to check if the style has CSS.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I have some node's notes written in Markdown that contain code blocks.
Here is an example, (if somebody wants to test it in a note with content type markdown):
## Code block
Code: **'example code'**
```groovy
// example code
// the node's details must start with a dot and then the language of the code
def text = node.text
def msg = "the text of the selected node is ${text}"
ui.informationMessage(msg.toString())
```
I made the following to test the new css capability:
I added the following text to the css definition to the Notestyle in the styles editor:
I think that the community voiced an idea a few months ago that anyone who made a feature request that was implemented would be responsible for documenting use of the feature. I am wondering whether you could compile the explanatory posts you have already made into a basic documentation of the CSS editor feature that we could add to the docs?
Dimitry said that CSS editor cannot be replaced with something simpler because CSS can indicate a wide variety of properties including paragraph spacing
Maybe later we could some user friendly editor with preview, there is a great example at https://liveweave.com/cssgen/index.html , but I do not think it can be the highest priority.
But here@macmarrum lists exactly 8 properties as the only ones that would be affected by the CSS
My understanding was later corrected by @dpolivaev, in the same post
currently all formatting options are applied to css style for body.
I think it can be kept so that they remain in place as long as there is no rule for body, and therefore existing formatting tools and CSS can be used together in a sensible way
Putting it all together, when Core Text contains Markdown/HTML, the formatting properties are converted into CSS for body. Keeping in mind that CSS for any other tag (e.g. h1) is more detailed than overall body instructions, it becomes clear that the formatting properties can coexist with CSS.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi @macmarrum, there are a lot of CSS formatting possibilities, so I expect that working out the details of the implementation and documentation will take some testing, especially in terms of when CSS and UI formatting settings conflict. It appears that both @edo_f and I have already encountered bugs. I also wonder how CSS interacts with conditional styles. There is no documentation for conditional styles yet anyway, but I'm sure that adding CSS makes it that much more complicated. Do you use any formatting properties set by UI, or will you do all formatting with CSS now?
I am also not clear about your comment "when Core Text contains Markdown/HTML" - there are a bunch of Core Text formats, what about the others?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Do you use any formatting properties set by UI, or will you do all formatting with CSS now?
Formatting properties (set by UI) can coexist with CSS -- I'll be using both.
I am also not clear about your comment "when Core Text contains Markdown/HTML" - there are a bunch of Core Text formats, what about the others?
If you want to know how, after the implementation, FP behaves in a particular case, you probably need to devise a test case and run it. If I were doing such testing, I'd create a node with LaTeX, add CSS containing body { color: red; } and see if the text turns red.
Other Core Text formats could be tested in a similar fashion.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I don't know what happened, I was testing new css feature, and then my notepanel's background-color turns black, while it's normal white in note dialog.
I restarted freeplane, now it turns normal. I guess there was a unusual operation changed default html style. anyway, I will see if it will happen again.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi, Dimitry, thanks for it. I just tested and it's ok now.
but I also found some other problem. v 1.9.12_04 seems not compatible with old version settings, I can't open or close some maps.
I can't provide more details until I spend enough time to test.
hope this feedback would make help.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
On top of it, all formatting options set in the formatting panel and all style options are applied to body, it means to all elements.
Because of huge amount of rules I think that showing all them to the users would just confuse them. However, css rules set by user always have the highest priority.
If user assigns custom css to a node or to a style, it these rules override all previously set rules.
But if the custom css covers only a part of properties or elements, the rest is still formatted as defined in the defaults.
For example, f you do not want to have bold, headers you can change it using just one line:
h1,h2,h3,h4,h5,h6{font-weight:normal;}
I have also added methods to set and get css to the script API.
Please check if the bugs you discovered are fixed now.
CSS is a powerful toy for advanced users who want to control more formatting details.
Because CSS is applied node wise or style wise, it is not considered in tool tips and in the export functions. It controls only how the mind map is shown in Freeplane.
Don't hesitate to ask new questions or give your feedback
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I have also added methods to set and get css to the script API.
This is quite useful. Thanks.
I can see that NodeStyleRO#getCss returns CSS added to the node (if present) or CSS added to the style applied to the node. NodeStyle#setCss adds CSS to the node.
I would like to be able to tell if CSS comes from the node or from the style applied to the node.
E.g. to search for nodes which have individual CSS applied and add an icon for each of them.
Could you please help me with that, Dimitry?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Each node and each style including default style, detail style and note style can specify their CSS sheet.
It allows very flexible formatting of HTML and Markdown content.
For notes and details CSS is taken from corresponding style or from default style.
However user defined CSS styles are applied on top of previously active styles so that there is no need to set this option if you are already satisfied with the formatting.
CSS editor has also got a preview.
I decided that because of many formatting properties available in CSS and covering fonts, colors, but also paragraph spacing, CSS editor can not be replaced by helper styles or any other simplification.
I am not sure how many of you find it useful.
Any feedback is highly appreciated.
Regards,
Dimitry
Hy Dimitry.
CSS seems powerful. But is it easy to learn? In the old times of the www,
and html, those CSS seemed very complicated? Is that still the case? How do
we learn about such thing?
Dimtry, thanks for this, it is useful!
@macmarrum, I think that the community voiced an idea a few months ago that anyone who made a feature request that was implemented would be responsible for documenting use of the feature. I am wondering whether you could compile the explanatory posts you have already made into a basic documentation of the CSS editor feature that we could add to the docs?
Feedback:
1. Dimitry, I suggest changing the
->button to readRefresh CSS Previewabove the arrow so the meaning is clearer.2. Currently, if I make H1 a certain font size in the CSS editor, but make no other formatting settings, H1 still previews as bold rather than normal. I'm sure this has a technical explanation but it is confusing, because it suggests that the CSS is changing a still-hidden group of CSS default values. It would make more sense to me if FP ignored any default hidden Markdown formatting settings if the user manually adds any CSS in the editor. Or, the CSS editor could be pre-populated with the default settings that are being used to style Markdown as shown in the preview.
3. I don't understand why the Preview text is centered, since the node text doesn't seem to be centered.
4. It will be easier to understand how CSS interacts with FP if the formatting elements that are defined by CSS are grayed-out in the Format UI. Otherwise users can set formatting in the UI and will see no effect.
5. I would add an indicator somewhere in the Format Panel UI, perhaps over "Node Color", telling the user whether the selected node is being formatted in part by CSS.
An important question: Dimitry said that CSS editor cannot be replaced with something simpler because CSS can indicate a wide variety of properties including paragraph spacing. But here @macmarrum lists exactly 8 properties as the only ones that would be affected by the CSS, writing: "No one offered a functionality to format nodes with CSS, only HTML/Markdown. In other words, only the 8 formatting properties mentioned above are interchangeable with CSS." Which is correct? Or are these views not actually in conflict?
Does the CSS applies to all Core Text formats or just some of them? What about LaTex or other formats?
Feedback:
6. I think the CSS should be included with templates in the same way normal styles are in terms of followed and associated templates. If a change is made to the CSS of a style in a followed template, that change should propogate to the map. And, if a change is made to the CSS of a style in a map, and the style is "Made default" using that action in the format panel, then the CSS change should be applied to the "maps based on template" indicated in the format panel.
Bug of some sort: I set a map to follow a template that has CSS. For the map, no CSS appears in the Style Editor. There is no bold set for any style. But when I select a node in the map, and change to edit mode, the text in edit mode turns bold. The bold remains after leaving edit mode.
Feedback:
7. In the style editor, there should be an indicator next to the styles that are using CSS formatting so the user doesn't have to select every style and manually open the CSS editor to check if the style has CSS.
@dpolivaev,
Nice!!!
I have some node's notes written in Markdown that contain code blocks.
Here is an example, (if somebody wants to test it in a note with content type markdown):
I made the following to test the new css capability:
pre { background-color: rgb(230, 230, 230); border: 1px solid rgb(0, 0, 0); display: block; padding: 10px; } code { font-family: Consolas,"courier new"; color: rgb(0, 80, 0); }and all the nodes with notes that contain code blocks changed for good in the map.
Just beautiful!!
thanks!
Last edit: Edo Frohlich 2021-11-30
I don't know why but all markdown type notes are in this version in Italics.
may be a bug?
Last edit: Edo Frohlich 2021-11-30
@dpolivaev,
¿are the maps saved with this FP version compatible with previous versions?
Thank you for the CSS capability! This is fantastic. I'm looking forward to playing with it.
~ Bal
@quickfold wrote
Yeap, I can do that.
@quickfold wrote
I can remember this post by @dpolivaev
@quickfold wrote
My understanding was later corrected by @dpolivaev, in the same post
Putting it all together, when Core Text contains Markdown/HTML, the formatting properties are converted into CSS for
body. Keeping in mind that CSS for any other tag (e.g.h1) is more detailed than overallbodyinstructions, it becomes clear that the formatting properties can coexist with CSS.Hi @macmarrum, there are a lot of CSS formatting possibilities, so I expect that working out the details of the implementation and documentation will take some testing, especially in terms of when CSS and UI formatting settings conflict. It appears that both @edo_f and I have already encountered bugs. I also wonder how CSS interacts with conditional styles. There is no documentation for conditional styles yet anyway, but I'm sure that adding CSS makes it that much more complicated. Do you use any formatting properties set by UI, or will you do all formatting with CSS now?
I am also not clear about your comment "when Core Text contains Markdown/HTML" - there are a bunch of Core Text formats, what about the others?
@quickfold wrote
In https://sourceforge.net/p/freeplane/bugs/ I can see the bug found by edo_f. I am missing yours.
Formatting properties (set by UI) can coexist with CSS -- I'll be using both.
If you want to know how, after the implementation, FP behaves in a particular case, you probably need to devise a test case and run it. If I were doing such testing, I'd create a node with LaTeX, add CSS containing
body { color: red; }and see if the text turns red.Other Core Text formats could be tested in a similar fashion.
I don't know what happened, I was testing new css feature, and then my notepanel's background-color turns black, while it's normal white in note dialog.
I restarted freeplane, now it turns normal. I guess there was a unusual operation changed default html style. anyway, I will see if it will happen again.
new finding:
before select problem node which contains head style:
once you select it, weird thing happens, nodepanel turns black, that's confusing:
you can check this out, I don't know if this would happen in other environment.
Last edit: peter 2021-12-02
it seems like a node's head style covers all document style, once you load it, you can't get rid of it.
see background-color attribute.
Last edit: peter 2021-12-02
since we get new css feature that is strong and flexible, so I use script to delete head style, now it's my solution. it worked.
Last edit: peter 2021-12-02
I know there are some bugs, I am going to check it at the weekend. Many thanks.
Fixed in preview 1.9.12_04
Hi, Dimitry, thanks for it. I just tested and it's ok now.
but I also found some other problem. v 1.9.12_04 seems not compatible with old version settings, I can't open or close some maps.
I can't provide more details until I spend enough time to test.
hope this feedback would make help.
Please check if it is fixed in v. 1.9.12_05 and submit a bug report if not.
I checked, and it was fixed. now everything is perfect.
I have fixed css related bugs in preview 1.9.12_04.
Basic css is a part of Java library and it is pretty big, you can check it at https://github.com/openjdk/jdk/blob/master/src/java.desktop/share/classes/javax/swing/text/html/default.css .
On top of it I add rules
On top of it, all formatting options set in the formatting panel and all style options are applied to body, it means to all elements.
Because of huge amount of rules I think that showing all them to the users would just confuse them. However, css rules set by user always have the highest priority.
If user assigns custom css to a node or to a style, it these rules override all previously set rules.
But if the custom css covers only a part of properties or elements, the rest is still formatted as defined in the defaults.
For example, f you do not want to have bold, headers you can change it using just one line:
I have also added methods to set and get css to the script API.
Please check if the bugs you discovered are fixed now.
CSS is a powerful toy for advanced users who want to control more formatting details.
Because CSS is applied node wise or style wise, it is not considered in tool tips and in the export functions. It controls only how the mind map is shown in Freeplane.
Don't hesitate to ask new questions or give your feedback
Here's the documentation I promised: https://github.com/macmarrum/wiki/blob/nodecss/css-for-html-or-markdown.md
Here's my Pull Request to merge it to the wiki on GitHub: https://github.com/freeplane/wiki/pull/3
@dpolivaev
This is quite useful. Thanks.
I can see that
NodeStyleRO#getCssreturns CSS added to the node (if present) or CSS added to the style applied to the node.NodeStyle#setCssadds CSS to the node.I would like to be able to tell if CSS comes from the node or from the style applied to the node.
E.g. to search for nodes which have individual CSS applied and add an icon for each of them.
Could you please help me with that, Dimitry?