Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linespace customise FR #1479

Merged
merged 30 commits into from
Oct 25, 2024
Merged

Linespace customise FR #1479

merged 30 commits into from
Oct 25, 2024

Conversation

hayden-MB
Copy link
Contributor

Pull request for FR #1477. Tested on bookdown-demo.

Rationalle for options: 1.0, 1.5, 2.0, 2.5 and 3.0 are standard options while 1.7 was the default.

Happy to discuss any of this.

@cderv
Copy link
Collaborator

cderv commented Oct 21, 2024

superseeding #1478 - just as note for myself

Copy link
Member

@yihui yihui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two questions:

  1. What did you change in inst/resources/gitbook/css/style.css? I feel it shouldn't be necessary to change this file (I think all relevant CSS can be added to plugin-fontsettings.css).
  2. Instead of hard-coding a few line height choices, would it be better to only add two buttons (one for increasing, and one for reducing line height, say, by 0.1)? By clicking these buttons, you change the data-line-height attribute of the element .book .book-body .page-inner section, and in CSS, you set line-height: attr(data-line-height). Then readers will have full freedom of choosing the most comfortable line spacing.

@yihui yihui linked an issue Oct 22, 2024 that may be closed by this pull request
@hayden-MB
Copy link
Contributor Author

  1. I removed a line which said 'line-space: 1.7' because it was overwriting the linespace menu. I could maybe do !important in plugin-fontsettings.css but that feels sligtly clunky. Will do whatever you feel is best though!
  2. I can work on this.

@hayden-MB
Copy link
Contributor Author

That should be the toggle option. Let me know what we should do on the CSS issue.

Copy link
Member

@yihui yihui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. plugin-fontsettings.css appears later than style.css, which means for the same CSS selector, plugin-fontsettings.css has precedence over stye.css, so I don't think you need !important (which we should typically avoid using).

  2. I didn't mean enumerating line-height values in CSS, but using the CSS function attr(), which gives you full freedom to use any line height specified in an attribute of the DOM element. I hope that's clearer now.

Thanks!

inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/css/plugin-fontsettings.css Outdated Show resolved Hide resolved
hayden-MB and others added 7 commits October 23, 2024 16:21
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
Co-authored-by: Yihui Xie <xie@yihui.name>
@hayden-MB
Copy link
Contributor Author

Hi there

  1. I would have thought this too, but it only works if I remove this line from the style.css. Not sure how to deal with this.

  2. Ah, thank you. I simply mirrored the style from font size which is a list of options, presumably to restrict options to a reasonable range.

I have committed your changes to my fork and tested them and they simply don't work. The spacing does not change with the buttons.

@hayden-MB
Copy link
Contributor Author

hayden-MB commented Oct 23, 2024

I don't think attr() works for line-height. This should work, I also added a minimum line height of 1 to prevent users from crossing text.

@hayden-MB
Copy link
Contributor Author

There is an issue that if you click reduce a bunch of times after you have reached minimum, you have to click increase the same number of times to start making a difference. Not sure how to fix this without hardcoding options. This may be why font size was done in this way.

Copy link
Member

@yihui yihui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. Sorry I forgot that attr() currently only works for content: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

There is an issue that if you click reduce a bunch of times after you have reached minimum, you have to click increase the same number of times to start making a difference. Not sure how to fix this without hardcoding options.

When fontState.spacing <= 10, we stop decreasing it.

BTW, is it still necessary to remove the default line-height from style.css? The style attribute usually has the highest precedence and will override most rules defined in external stylesheets.

Please also add a bullet item to NEWS.md.

inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
@hayden-MB
Copy link
Contributor Author

Yes we can now return the css to how it was as there is no changes to even the fontplugin css anymore. Should be that all the changes are in the JS page.

@hayden-MB
Copy link
Contributor Author

Not sure why accepting that change seems to have caused tests to fail? Any ideas?

Copy link
Member

@yihui yihui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that style.css was not restored.

Not sure why accepting that change seems to have caused tests to fail? Any ideas?

I think you can ignore that. Looks like a change in the dev version of Pandoc irrelevant to this PR. We'll look into it.

Thanks!

inst/resources/gitbook/css/plugin-fontsettings.css Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
inst/resources/gitbook/js/plugin-fontsettings.js Outdated Show resolved Hide resolved
Copy link
Member

@yihui yihui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tweaked the rest of minor things and the PR is ready to merge now. Thanks again!

@yihui yihui merged commit 9dca1f9 into rstudio:main Oct 25, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FR] Line spacing customisable
3 participants