twinejs
twinejs copied to clipboard
klembot
Add story title and tags as data attributes to the editor HTML
Is your feature request related to a problem? Please describe.
The new user.css file allows the author to add custom styling to their Twine installation, but these styles are applied to all stories, and there is nothing in the current document html structure that would allow styles to be scoped to a particular story.
If the current story title, and tags, were added as data attributes in the editor HTML structure, ideally on the <html> element, then it would be possible to write scoped CSS for particular stories.
Describe the solution you'd like.
Add a data-story-title attribute to the <html> or <body> element of the editor, containing the current story title.
Add a data-story-tags attribute to the same element with a list of the story tags.
Describe alternatives you've considered.
An obvious alternative is multiple user.css files, one for each story/tag ... this would probably get quickly out of hand.
Another option would be to allow editor-customising CSS to be stored in the stories themselves, but this would be a much more extreme solution.
Additional context on this suggestion.
No response
Presubmission checklist
- [X] I am interested in working on code that would implement this feature request. (This is not required to submit a suggestion.)
- [X] I have done a search and believe that an issue does not already exist for this idea in the GitHub repository.
- [X] I have read and agree to abide by this project's Code of Conduct.
Could you explain a little bit how you would use this feature in practice?
To write rules such as html[data-tags~=whatever] to override tag colours for specific stories, specifically style passages with certain tags (which might have meaning in some formats/stories but not others), or even change the overall story colour scheme for a certain story.
Since you mention having interest in implementing this:
- I think any data attributes should not be on the main HTML tag but on the root element StoryEditView renders
- It would be ideal if this was done in a flexible way as opposed to hard coding attributes, so that if additional things are added to stories, we don’t have to do any additional work to keep this up to date
- Documentation would need to be added explaining how an end user would make use of this
It would be ideal if this was done in a flexible way as opposed to hard coding attributes, so that if additional things are added to stories, we don’t have to do any additional work to keep this up to date
Not sure what you mean. Do you mean that you'd want to make a data attribute out of every attribute of the story object, presumably excluding story.passages and story.tagColors?
Not necessarily every attribute. What I mean is something like this:
- Define the attributes to add to HTML somewhere.
- For every attribute to add to HTML:
- If it's a string, do this.
- If if's an array of strings (e.g. the tags), do something else.
- If it's a number, convert it to a string probably.
Other thing I forgot to mention is that it would be ideal if it was implemented as a hook, mainly to keep the complexity of StoryEditView down. I refactored out as much as I could into individual hooks because the component source code was getting really long.
Hello! I wonder if this issue has been assigned to anyone. If not, my friend and I are interested in working on code that would implement this feature request.
No one has done any work on this to my knowledge, but let's resolve things over on https://github.com/klembot/twinejs/pull/1493 before you do work here.
Hey @klembot was wondering if someone's working on it and if not then would be interested for the same! I see that the issue that you mentioned above has been fixed so I believe there is no blocker for this one ?
I have not done any work on it so far, so feel free @KlausMikhaelson