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

Documentation: Code samples aren't visible when printed #23431

Closed
SetTrend opened this Issue Apr 18, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@SetTrend

SetTrend commented Apr 18, 2018

I'm reading the documentation in a printed version as it's more versatile to me than to fuzz with a tablet, particularly in bed or outdoors.

Today I noticed that when printed by Firefox (latest, Windows 10), the code samples aren't visible:

nocodeindocumentation

Would you mind fixing this in the documentation stylesheets?


PS: I'd like to give my kudos to those guys who have set up the documentation styles for easy printing. Great job!

I'd like to take the opportunity to suggest to add an additional documentation page: a page containing the documentation as a whole, so that it can be printed as one big brochure instead of dozens of small brochures with loads of empty trailing pages.

@ericmartinezr

This comment has been minimized.

Contributor

ericmartinezr commented Apr 18, 2018

Do you use some specific setting for printing it to a pdf? I can see it correctly in FF 59.0.2 (64-bit).

image

Full image

I tried with both FF and Chrome. Both printed the pdf correctly with no issues. The only difference is that Chrome created a 5mb larger file than FF.

@SetTrend

This comment has been minimized.

SetTrend commented Apr 19, 2018

I didn't change any settings. It's interesting, though, that your screenshot doesn't show any color whatsoever whereas mine does.

Which kind of printer did you use? I'm using a color laser printer (OKI C531dn) which is selected as my Windows default printer.

These are my printer settings (which are FF default settings):

ff printer settings

(The screenshot is in German, but the dialog ought to be the same in English.)

@ngbot ngbot bot added this to the needsTriage milestone Apr 20, 2018

@gkalpak

This comment has been minimized.

Member

gkalpak commented Apr 20, 2018

It is the Hintergrund drucken setting. By default, it is unchecked. Checking it does indeed have the effect you describe.

Glad to see that the print-friendly styles (courtesy of @sjtrimble 😃) are useful to people.

We obviously missed the black background and need to fix it.
If anyone wants to help, this is the file you need to change.

@SetTrend

This comment has been minimized.

SetTrend commented Apr 20, 2018

Firefox says it reads the code-example styles for printing from here:

code example styles


I would change it but I wouldn't dare fiddling around in these SCSS files without knowing the author's design rules.

SetTrend added a commit to SetTrend/angular that referenced this issue Apr 22, 2018

fix (printing docs): Added printer friendly code-example background c…
…olor rule

The original SCSS file for printing the documentation is missing a background-color rule for printing, so color/background-color happen to be the same.

I added a light grey background color rule that saves toner and still is immediately recognizable as distinct code example token to the reader.

Closing angular#23431
@SetTrend

This comment has been minimized.

SetTrend commented Apr 22, 2018

I just amended the corresponding file (hopefully meeting the original author's intention).

The linter fails on my commit comments. I've already tried to amend them to meet its requirements and created a second pull request with an updated comment, but to no avail yet.

I wouldn't want to spend too much time on digging into your project's check-in policies. Please revise my changes and merge if you like them.

@SetTrend

This comment has been minimized.

SetTrend commented Apr 22, 2018

Here's the expected result of my changes:

updated code-example scss

SetTrend added a commit to SetTrend/angular that referenced this issue Apr 22, 2018

fix (printing docs): Added printer friendly code-example background c…
…olor rule

Moved new background-color rule to `.code-shell` CSS class as this class is responsible for shell code snippets.

angular#23431

SetTrend added a commit to SetTrend/angular that referenced this issue Apr 24, 2018

docs(aio): Add printer friendly code-example BG color rule
Moved new background-color rule to `code-example.code-shell` CSS class as this class is responsible for shell code snippets.

angular#23431

gkalpak added a commit to gkalpak/angular that referenced this issue Apr 25, 2018

@IgorMinar IgorMinar closed this in 57cf550 May 4, 2018

@petebacondarwin petebacondarwin removed this from TODO in aio Jun 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment