pstein

@dsonesuk:

Thank you. It works

Occasionally I load a web page which contains a text line and immediately appended after the right side an image <img>

I want to let the <img> start in a next line.

So I need a kind of <br> separation between text and image (not with <P>).

However I have no access to the original webserver but want to apply a modification afterwards (after loading)

I can imagine that there is a CSS property (for <img>) which let me tell the browser engine "put in next line".

How can I achieve this in detail?

Peter

Sorry, they changed the headline meanwhile.

Take just the current headline or first paragraph of core article

Thank you

Lets take an example from a german online magazine:

https://m.pnn.de/coronavirus-in-europa-spanien-hat-nun-mehr-bestaetigte-infektionen-als-italien/25560996.html

RIght click on the headline beginning with "Coronavirus in Europa Spanien hat nun mehr"

and select "inspect" from context menu

The WebDeveloper  I do NOT find a valid font-family name. All existing there are either disabled or have a value "inherited".

So it must be the browser default which is Courier New.

But this font is NEVER "Courier New"!

So how do I find out the real font family name otherwise?

Peter

Sometimes when I inspect the web page HTML/CSS code and search for the font-size and line-height of a certain text I can not find it.

When I right-click (in Firefox) on this certain text and select "Inspect element"
the corresponding HTML/CSS code is shown in the lower pane in WebDeveloper.

However in the lower right sub pane I do not find the real, final font-size and Line-height.
All occurencies are labeled as "inherited"

Inherited from what?

I expect to get at least one valid font-size and line-height CSS value in the cascade chain.

Lets take an example from a german computer online magazine:

https://www.zdnet.de/88377738/smb-luecke-microsoft-veroeffentlicht-patch-kb4551762

Now right click on the line beginning with

Set-ItemProperty -Path "HKLM:\SYSTEM\Current......

at the bottom of the core article and inspect element.

For this text I found only "inherited" values.

How do I find out the current font-size and line-height?

I am NOT interested for a particular example but on how to find it out in general.

Peter

At first lets have a look at an example webpage:

https://www.thewindowsclub.com/most-useful-commands-for-powercfg-command-line

As you can see the article contains some <pre> blocks which in turn contain commands lines which are NOT wrapped at the browser window end.

Instead a horizontal slider is displayed which let user scroll to the currently invisible part of the command line.

Now if I want to print this page (into *.png or *.pdf) important parts of these commands are NOT displayed.

How can I apply some CSS/Javascript commands which tell the rendering engine to AUTOMATICALLY (soft) wrap these over-long lines
at suitable blanks (!) into a second (or even third) line in <pre> block?

Peter

When I print occasionally web pages into a pdf file then images on this web pages are NOT split.
When an image does not fit on the current pdf page then a page break is inserted and the image is put on the top of the next pdf page.

How can I allow image split in pdf printing (if necessary) for ALL images on the current web page?

Is there a corresponding attribute for the <img> tag?

Peter

Lets talk on the following (simplified) example webpage:

https://blogs.systweak.com/uninstall-unwanted-programs-on-windows-10/

I did now the following:

- I opened Firefox--WebDeveloper

- I deleted the element <header class="site-header">....    </header> in WebDeveloper

- I changed in WebDeveloper all the values for CSS key ".article-shadow" and attributes margin-top, padding and border-radius to 0

As you can see from the following snapshot the headline "Easy Tricks to uninstall Unwanted...." appears in browser window directly below the top border.

http://easycaptures.com/8003064666

Now when I print this page into a pdf then an unexpected big, big gap between top border and headline is inserted.

Why?

Does it come from @media print section?

Which CSS value is responsible (otherwise)?

How can I get rid of the gap in pdf printout

Peter

In a webpage I have the following HTML code:

<img class="logo" src=....>...</img>

with the corresponding CSS:
 

.logo {
    width: 12rem;
    ....
}
img {
    width: auto !important;

...
}

As you can see there are two somehow contradicting width values. Ok, since the width in IMG has an !important postfix it has a higher priority.

And this is the problem.

How can I disable the width value/key in IMG CSS specification and let the width value for .logo become active?

How can I delete a CSS key?

Since "auto" is already the default value overwriting it with the default value makes no sense.

I have no access to the original html/CSS code but must apply it afterwards

Thank you

Peter

I want to print a whole webpage which (when printed) creates ONE pdf file with many pdf pages.

Example

Print with Chrome or from chrome-based browsers

I have a webpage which contain the following element:

<heaeder class="site-header">
....
</header>

With CSS class definition as follows:
                            
.site-header {
    position: relative;
    z-index: 223;
    ....
    box-shadow: none;
}

When I print now this (long) web page into a pdf doc file then this header pane appears at the top of each pdf page.

How can achieve that this header pane appears only at the FIRST pdf page?

Thank you

Peter

Hmm, thank you for the suggestion.

But I didn't understand.

Have a look at the attached snapshot for sample webpage:

http://www.ilovefreesoftware.com/13/featured/create-free-dynamic-dns-websites.html

I want to have a (pdf) page-break BEFORE the headline "DUCKDNS".

I opened therefore Inspector of Firefox and inserted

break-before: page;

DIRECTLY for this element. But it is even not accepted.

Why not?

Peter

Assume I want to print a large web page into a pdf file by using the browsers pdf printer driver.

It works.

However the pdf page breaks created by the printer driver (or browser rendering engine?) are really at a bad place.

For a better printing result I would like to insert (manually) some page breaks into the HTML/CSS.

How can I achieve this?

Read: what are suitable HTML/CSS instruction for "insert page break here when pdf printing"?

Is there something like a <div style="pagebreakbefore" .....>?

Thank you

Peter

I have troubles when printing a web page in Firefox (into pdf file). The web page does not detect resp. insert page breaks.

I found out that everything works fine when I disable (=uncheck) the checkboxes before the CSS key values

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;

I have no access to the original web page code or server.
So I have to change them after loading by a javascript script

How can I disable them resp. whats the default (=non flex value)?

display: none !important;
flex-direction: none !important;

does not help

How else can I achieve it?

What about disabling flex compoletely including the CSS values
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;

Great! Thank you

Lets start with a sample web page (german product review):

https://www.chip.de/artikel/Fahrradschloss-Test-Die-sichersten-Fahrradschloesser-im-Vergleich_141298173.html

Now don't search for a "print" button or link on the webpage.

Go instead to the "print" menu of your browser (Firefox or chrome) and print the whole web page into a local PDF file.

Use for example the wide spread, well known free PDFcreator printer tool. But others seem to show the same problem.

As you can see in the resulting pdf each page starting from page 2 show a messy, annoying "Tab" border picture at the bottom which is NOT visible on the original webpage and which covers a part of the text.

See attached snapshot as well.

Which HTML/CSS element is responsible for this mess?

Thank you

Peter

Assume I load a web page from an external server (which is not under my control) which contains a CSS with a !important statement for a lets say "file-size. attribute".

Now I want to overwrite this CSS statement with my own value e.g. by using Greasemonkey AddOn in Firefox which adds new, additional CSS statements to the pool of existing CSS statements.

This "normal" overwriting can be performed by appending an "!important" tag at the end.

But what if the original CSS contains already an "!important" tag?

How can I later/afterwards overwrite this with an even higher priority !important value?

Peter

When I print webpages (on paper or into pdf) then occasionally embedded pictures are split among two pages.

How can I prevent this split?

If an image does not fit on a (pdf/paper) page any more it should be shifted to the following (pdf/paper) page.

Peter