Difference between revisions of "Text-overflow middle cropping"

From W3C Wiki
Jump to: navigation, search
(Initial draft of the definition)
 
(Enhanced the description of the proposal + syntax, added a description of the longhand properties and fixed the examples)
Line 1: Line 1:
== Description ==
+
== Existing behavior ==
 
According to the [https://developer.mozilla.org/En/CSS/Text-overflow description of <code>text-overflow</code> at Mozilla] and the [http://dev.w3.org/csswg/css3-ui/#text-overflow definition in the current W3C CSS UI module spec] there's currently only the possibility to clip strings at the beginning and their end.
 
According to the [https://developer.mozilla.org/En/CSS/Text-overflow description of <code>text-overflow</code> at Mozilla] and the [http://dev.w3.org/csswg/css3-ui/#text-overflow definition in the current W3C CSS UI module spec] there's currently only the possibility to clip strings at the beginning and their end.
Though for recognizability it's sometimes better to crop the string in the middle.
 
Firebug is using that principle for file names and URLs and it works well. Though the strings are not cropped dynamically. So there's a problem when the containing element is resized. See [http://code.google.com/p/fbug/issues/detail?id=4864 issue 4864].
 
  
Example:
+
== Proposal ==
 +
For recognizability it's sometimes better to crop the string in the middle. To keep the recognizability high even on small strings, there should be a way to define parts of the content, which should be preserved, i.e. not be truncated.
 +
 
 +
To do so the <code>text-overflow</code> property could be extended to allow defining a third value for the middle-string replacement and values defining the lengths of the string parts to preserve. So its syntax would look something like this:
 +
 
 +
  text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ]
 +
 
 +
Use case:
 +
[https://getfirebug.com/ Firebug] is using that principle for file names and URLs and it works well. Though the strings are not cropped dynamically. So there's a problem when the containing element is resized. See [http://code.google.com/p/fbug/issues/detail?id=4864 issue 4864].
 +
 
 
   this_is_a_very_long_filename.txt
 
   this_is_a_very_long_filename.txt
 
   this_is_a_very_long_filename2.jpg
 
   this_is_a_very_long_filename2.jpg
  
With the current implementation this would be cropped to something like:
+
With the current implementation this could be cropped to something like this:
  
 
   this_is_a_very_lo…
 
   this_is_a_very_lo…
Line 28: Line 35:
 
   t…jpg
 
   t…jpg
  
== Examples ==
+
Because there will be some more values available for the <code>text-overflow</code> property, it would make sense to convert it to a shorthand property consisting of the following longhand properties:
 +
 
 +
  text-overflow-start
 +
  text-overflow-middle
 +
  text-overflow-end
 +
  text-overflow-min-width
 +
 
 +
<code>text-overflow-start</code>, <code>text-overflow-middle</code> and <code>text-overflow-end</code> would define the replacement string at the beginning, the middle and the end of the text. And <code>text-overflow-min-width</code> would hold one or two values representing the minimum width of the right and the left part of the content to preserve.
 +
 
 +
== Definition examples ==
  
 
   p {
 
   p {
Line 34: Line 50:
 
     width: 100%;                     
 
     width: 100%;                     
 
     overflow: hidden;
 
     overflow: hidden;
     text-overflow: clip ellipsis clip 3ch;
+
     text-overflow: clip ellipsis clip 0 3ch;
 
   }
 
   }
  
Line 41: Line 57:
 
     width: 100%;                     
 
     width: 100%;                     
 
     overflow: hidden;
 
     overflow: hidden;
     text-overflow-left: clip;
+
     text-overflow-start: clip;
 
     text-overflow-middle: ellipsis
 
     text-overflow-middle: ellipsis
     text-overflow-right: clip
+
     text-overflow-end: clip
     text-overflow-min-width: 0 0 3ch;
+
     text-overflow-min-width: 0 3ch;
 
   }
 
   }
  
 
== See also ==
 
== See also ==
 
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]
 
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]

Revision as of 21:14, 18 July 2013

Existing behavior

According to the description of text-overflow at Mozilla and the definition in the current W3C CSS UI module spec there's currently only the possibility to clip strings at the beginning and their end.

Proposal

For recognizability it's sometimes better to crop the string in the middle. To keep the recognizability high even on small strings, there should be a way to define parts of the content, which should be preserved, i.e. not be truncated.

To do so the text-overflow property could be extended to allow defining a third value for the middle-string replacement and values defining the lengths of the string parts to preserve. So its syntax would look something like this:

 text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ]

Use case: Firebug is using that principle for file names and URLs and it works well. Though the strings are not cropped dynamically. So there's a problem when the containing element is resized. See issue 4864.

 this_is_a_very_long_filename.txt
 this_is_a_very_long_filename2.jpg

With the current implementation this could be cropped to something like this:

 this_is_a_very_lo…
 this_is_a_very_lo…

So the file types and names can't be destinguished.

If the truncation could be specified to happen in the middle of the word, this would look like:

 this_is_a_…ename.txt
 this_is_a_…name2.jpg

Regarding this use case the most characterizing part is obviously the file extension. So to keep it visible there could be another option to specify the number of characters to prevent from being cropped (at the left and the right side).

So if there's just space for e.g. 5 characters and we specified not to crop the right 3 characters, the result would look like this:

 t…txt
 t…jpg

Because there will be some more values available for the text-overflow property, it would make sense to convert it to a shorthand property consisting of the following longhand properties:

 text-overflow-start
 text-overflow-middle
 text-overflow-end
 text-overflow-min-width

text-overflow-start, text-overflow-middle and text-overflow-end would define the replacement string at the beginning, the middle and the end of the text. And text-overflow-min-width would hold one or two values representing the minimum width of the right and the left part of the content to preserve.

Definition examples

 p {
   white-space: nowrap;  
   width: 100%;                     
   overflow: hidden;
   text-overflow: clip ellipsis clip 0 3ch;
 }
 p {
   white-space: nowrap;  
   width: 100%;                     
   overflow: hidden;
   text-overflow-start: clip;
   text-overflow-middle: ellipsis
   text-overflow-end: clip
   text-overflow-min-width: 0 3ch;
 }

See also

Enhancement request at Mozilla