I am using Puppeteer to automate some processes.
I need to find the largest text on a web page.
I do not know if this is possible through Puppeteer. I suppose I could write a script that would check the CSS and all inline CSS on the page and try to find which class has the largest text size, but if the page is dynamically loaded it may make things more complicated.
Another issue would be if the text is bound within an element and the size of the text is just set to 100% of the width or height.
As far as I can tell it may not be possible to get the largest text on the screen, but I thought I would pose the problem here to see if other people had ideas for a solution.
Thank you.
Related
I have a page which I use often to check some stuff, but it's not developed by me.
On this page, there is a label which is always to small and to read it completly, I go always to dev console, search the label and change the width manually.
This annoys me, is there a possibility to set the value fixed for myself? or with a chrome plugin so that I don't have to do it all the times?
This is the page, when I've loaded it:
You can see the yellow boarder, it's not wide enought, that I can see the whole text.
So to see it, I always open Developer Console and change the width of this css class to a width of 400px.
default it's set to 250px.
I'd like to find a way, that I don't have to do that every time manually.
But I don't have impact on the code, I'm not a developer of the page. Just a user.
And couldn't finde a solution, if there is a plugin or another way, how I can configure chrome that for this page, this width of the class will be changed automatically.
Try to add !important in your css code as there might be the case in your browser so go with an important tag hope it will help you to resolve your query
I have a couple of questions about the problem of hiding text inside an anchor tag and only displaying a background image.
Note to those about to bombard me with links to other articles and tell me that this is a repeat question: I have scoured this site and the web in general and read the solutions (and by solutions I mean mostly hacks) people came up with. What most people seem to be doing (or have done up until recently) was the -9999px hack. Also popular is/was wrapping the text in a span and doing something like this or visibility: hidden.
Now, I personally think that "hiding" the text would really only make sense in the first place if it was hidden dynamically, i.e. displayed only if the background image wasn't loading (for whatever reason). However, all the "solutions" I found effectively remove the text completely or at least hide it permanently so even if the background image isn't loaded, the text still wouldn't be displayed.
So here are my questions:
Why would one want to have text and then permanently hide it at all? Why not just leave the anchor empty - i.e. just don't put any text in it - and only have the image displayed? Why have text and then go through the headache of figuring out how to hide it? What's the point of that? Am I missing something here?
Now that we have CSS3, are there actual non-hacky, dynamic ways to hide text when the background image is displayed and have the text appear when the image - for whatever reason - fails to load? I couldn't find any resources so I am assuming this is not supported but maybe one of you ninjas knows better?
There are different possibilities why to do that:
Search Engines scan the web and also gather content that is visually hidden. The site gets better in terms of semantics and has a higher page rank.
Many visually impaired people rely on content that's read to them by screenreaders. Sometimes text in the alt-tag is just not enough. Background images don't even have such a tag.
To your second question:
To me there is no known way to check if a background-image is successfully loaded and is also shown (a totally different story!). CSS only styles content according to defined rules. There may be a javascript way to do it, but in my opinion it isn't worth the cost because mostly this text isn't really a fallback. It has a different purpose as stated above.
Given some HTML code, is there a way (in Ruby on Rails, in particular), to tell how many lines the HTML will take up on the screen when rendered?
-- Clarifications:
It's in an erb file, but i'm just talking about one string that will be rendered as HTML so yes, text that contains HTML tags.
-- EDIT:
The bigger picture: I want to know how tall a particular segment of the page is so I can conditionally include certain "Next/Previous" links on the bottom. These navigation links appear above the aforementioned segment, so I only want to include the links on the bottom if the segment is very tall.
Essentially, no - it all will depend on the CSS being applied by the browser and the platform itself and lots of other variables. You can, however, detect the dimensions of elements once they are rendered.
Update
Pursuant to your edit, you pretty much need to do this on the client using JavaScript. It's actually pretty straight forward.
Add the Next/Previous element HTML to the page but hide it with CSS
Detect the height of the element in question
If the height is above you threshold size, display the hidden Next/Previous
With Jquery (the framework of champions):
//assuming a height of 200 as the threshold
var THRESHOLD_HEIGHT = 200;
if ($("#segment").height() >= THRESHOLD_HEIGHT) {
$("#links").show();
}
No.
How can you possibly know how wide my screen will be when I visit your website?
Look at YUI Paginator http://s831.us/hW6Dpd
You would probably be best off solving this problem with javascript (or even better a javascript library like jquery). You could measure the height of the div containing the text you want to paginate and dynamically break it apart and add links in the browser. There would be several ways of solving this problem but I would probably do it by sequentially chopping off paragraphs from the end and remeasuring and repeating until it was short enough. Obviously the chopped off paragraphs would have to be collected somewhere to be used for the next page (and recursively measured again in case the second page was also too long).
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.
We have an HTML page which displays a bunch of pretty bars using divs and repeating backgrounds. We are in the process of making a report out of this that can be printed nicely, but this may take some time because we don't have a reporting framework in place. As an interm solution we'd like to make the HTML version printable. The background of the divs are the only problem, and they don't print because of the default setting (which can't be enabled because the workstations are locked down).
I have found a work around for printing background images, but this doesn't work when the background needs to be repeated.
Are there any other work arounds which might be able to help? I have also been trying to insert an image inside the dive and stretch it, but this is throwing off all the other relative positions and is proving to be very difficult to fix. I am still looking into this however.
I have used this ActiveX Component in situations where controlling the printer output was absolutely neccessary (think printing stickers etc).
The function you'd want is : printBackground
However this doesn't come with their free license but perhaps the cost of that license outweigh the other work arounds implementation time.
Drawback: IE only.
If you can educate your users, there is an option in the print dialog box of IE and Firefox that is labeled something like 'Include Background Images' or 'Print Background Images'
This will include repeating background images.
I couldn't load the link, and I may not be understanding the problem correctly, but...
This is more of a work-around than a solution, but would you be able to make a single image that just appears to be repeated? Or at least, is repeated (for variable browser and screen sizes), but is large enough to be 'proper' for printing (which is a much more standard size)?
The easiest way I can think of achieving this is to have different stylesheet for printing that uses standardised images that fit the containers printed on paper.
The display stylesheet would continue to use the repeated images which wouldn't hinder performance as the full images loaded in the print stylesheet would only be loaded when the page is sent to the printer.
...at least, that's what the HTML spec says should happen. Whether this is actually the case, I can't be 100% sure.