SearchSearch   

Preventing text from being cropped ?

  
   Webmaster Forums (Home) -> CSS RSS
Next:  Button like Link :: Negative margin in IE  
Author Message
David Teller

External


Since: Aug 07, 2007
Posts: 1



(Msg. 1) Posted: Tue Aug 07, 2007 3:58 am
Post subject: Preventing text from being cropped ?
Archived from groups: comp>infosystems>www>authoring>stylesheets (more info?)
Hi everyone,

I'm attempting to get a website to look like a book. Among other
things, it means that I don't want half-lines of text to appear at the
bottom/top of my screen. Rather, when a line doesn't fit vertically in
the display, I want it to simply disappear. This is something that
every word processor does by pushing the whole line to the next page,
but I have trouble doing it with CSS.

To put it visually, instead of
http://openberg.sourceforge.net/documents/crop.png
I want my CSS to make sure that I see
http://openberg.sourceforge.net/documents/non-crop.png

Note that this problem is not related to widows and orphans and
appears even with the simplest web pages: even something like
<html><body>plenty of words here...</body></html> will be displayed
with lines of text cut vertically, if there's too much text to fit
vertically in the browser.

I'm looking for a way to solve this problem. I'm okay with Firefox-
specific solutions. I'm also willing to use CSS and as much JavaScript
as required. If need arises, I'm even willing to develop a site-
specific extension for this.

Thanks in advance,
David
Back to top
Jim Moe

External


Since: Mar 31, 2005
Posts: 921



(Msg. 2) Posted: Tue Aug 07, 2007 12:07 pm
Post subject: Re: Preventing text from being cropped ?
Archived from groups: per prev. post (more info?)
David Teller wrote:
>
> I'm attempting to get a website to look like a book. Among other
> things, it means that I don't want half-lines of text to appear at the
> bottom/top of my screen. Rather, when a line doesn't fit vertically in
> the display, I want it to simply disappear. This is something that
> every word processor does by pushing the whole line to the next page,
> but I have trouble doing it with CSS.
>
Word processors and page layout programs have the advantage that the
layout space has fixed dimensions. The page size, font size, positioning,
etc., are all controllable factors.
This is not the case for a web page. None of those factors are known a
priori. Attempts to constrain any of those elements works only for those
limited conditions and the layout usually degrades quickly outside of
those constraints.
You do not know how a particular browser is configured. The text size
may be made much larger for someone with limited vision; the viewport may
be very narrow.

Given your example your best choice is to make the block containing the
text adapt to the amount of text in the block rather than trim the text.
Design your layout for the WWW, not a book.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Back to top
Ben Bacarisse

External


Since: Feb 05, 2006
Posts: 84



(Msg. 3) Posted: Tue Aug 07, 2007 1:59 pm
Post subject: Re: Preventing text from being cropped ?
Archived from groups: per prev. post (more info?)
David Teller <D.O.Teller.DeleteThis@gmail.com> writes:

> Hi everyone,
>
> I'm attempting to get a website to look like a book.

You knew someone was going to say "stop wanting that", right? OK, let
it be me: stop wanting that! You are wresting with, at least as
described, a non-problem. Browsers display the page content in a box
that is big enough to contain it. This is mighty convenient for users,
and constraining the box seems odd.

OK, you know that, I am sure. So assuming that you have some reason
to reduce the usability of the text by clipping it, then...

> Among other
> things, it means that I don't want half-lines of text to appear at the
> bottom/top of my screen. Rather, when a line doesn't fit vertically in
> the display, I want it to simply disappear. This is something that
> every word processor does by pushing the whole line to the next page,
> but I have trouble doing it with CSS.

You can get a solution for simple cases quite simply. If you set the
line-height of the text to a known quantity (say 1.4em so that it
scales nicely with the text) and you put the text in a box whose
height is a multiple of this size, then setting overflow: hidden you
get something of what you want.

This goes wrong if any line is made taller (e.g. with a <sup></sup>)
or if anything is added that is not a multiple of this line height
(e.g. headings, margins, etc.). You might be able to arrange that
this never happens, but if your content is very general, you will be
stuck.

I am not sure this is even a start...

--
Ben.
Back to top
Chris F.A. Johnson

External


Since: Jul 09, 2006
Posts: 320



(Msg. 4) Posted: Tue Aug 07, 2007 2:45 pm
Post subject: Re: Preventing text from being cropped ?
Archived from groups: per prev. post (more info?)
On 2007-08-07, David Teller wrote:
> Hi everyone,
>
> I'm attempting to get a website to look like a book. Among other
> things, it means that I don't want half-lines of text to appear at the
> bottom/top of my screen. Rather, when a line doesn't fit vertically in
> the display, I want it to simply disappear. This is something that
> every word processor does by pushing the whole line to the next page,
> but I have trouble doing it with CSS.
>
> To put it visually, instead of
> http://openberg.sourceforge.net/documents/crop.png
> I want my CSS to make sure that I see
> http://openberg.sourceforge.net/documents/non-crop.png
>
> Note that this problem is not related to widows and orphans and
> appears even with the simplest web pages: even something like
><html><body>plenty of words here...</body></html> will be displayed
> with lines of text cut vertically, if there's too much text to fit
> vertically in the browser.
>
> I'm looking for a way to solve this problem. I'm okay with Firefox-
> specific solutions. I'm also willing to use CSS and as much JavaScript
> as required. If need arises, I'm even willing to develop a site-
> specific extension for this.

Your best bet is to write an add-on for Firefox.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Back to top
Bergamot

External


Since: Sep 27, 2006
Posts: 727



(Msg. 5) Posted: Tue Aug 07, 2007 3:23 pm
Post subject: Re: Preventing text from being cropped ?
Archived from groups: per prev. post (more info?)
David Teller wrote:
>
> when a line doesn't fit vertically in
> the display, I want it to simply disappear. This is something that
> every word processor does by pushing the whole line to the next page

I don't know what word processor you use that does this, but mine don't
do what you claim they all do.

Unless the application viewport is exactly the right height, scrolling
up or down a page of text *may* reposition either the top or bottom line
so it doesn't get clipped, but the line at the other end may well be cut
off. This is true for both Word and Open Office, at least on my PC.

> but I have trouble doing it with CSS.

It's really a waste of time trying to do it at all. The closest you'll
get is setting the container height and line-height as was already
suggested, but usability is probably negatively affected when you do that.

--
Berg
Back to top
Jim Moe

External


Since: Mar 31, 2005
Posts: 921



(Msg. 6) Posted: Tue Aug 07, 2007 7:11 pm
Post subject: Re: Preventing text from being cropped ?
Archived from groups: per prev. post (more info?)
Bergamot wrote:
>>
>> when a line doesn't fit vertically in
>> the display, I want it to simply disappear. This is something that
>> every word processor does by pushing the whole line to the next page
>
> I don't know what word processor you use that does this, but mine don't
> do what you claim they all do.
>
It is more a feature of page layout programs like QuarkExpress or
InDesign. He correctly named them later as "widows" and "orphans." I
believe more recent versions of word processors have added the feature to
their repertoire.
I can never remember which is which, widows and orphans. One is the
single line of a paragraph at the bottom of a page (widow?), the rest of
the paragraph on the next page. The other is the last line (orphan?) of a
paragraph on the following page with the rest of the paragraph on the
preceding page.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Back to top
Display posts from previous:   
       Webmaster Forums (Home) -> CSS
Page 1 of 1

 
 You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum