https://www.w3.org/wiki/api.php?action=feedcontributions&feedformat=atom&user=SebastianzW3C Wiki - User contributions [en]2024-03-28T13:15:07ZUser contributionsMediaWiki 1.41.0https://www.w3.org/wiki/index.php?title=Text-overflow_middle_cropping&diff=67542Text-overflow middle cropping2013-07-18T21:38:23Z<p>Sebastianz: Replaced wiki hosted image link by external image link (due to not having rights to upload images)</p>
<hr />
<div>== Existing behavior ==<br />
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.<br />
<br />
== Proposal ==<br />
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.<br />
<br />
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:<br />
<br />
text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ]<br />
<br />
Use case:<br />
[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]. There's also a [http://img545.imageshack.us/img545/1717/40m7.png screenshot of how this currently looks like in Firebug].<br />
<br />
Example:<br />
this_is_a_very_long_filename.txt<br />
this_is_a_very_long_filename2.jpg<br />
<br />
With the current implementation this could be cropped to something like this:<br />
<br />
this_is_a_very_lo…<br />
this_is_a_very_lo…<br />
<br />
So the file types and names can't be destinguished.<br />
<br />
If the truncation could be specified to happen in the middle of the word, this would look like:<br />
<br />
this_is_a_…ename.txt<br />
this_is_a_…name2.jpg<br />
<br />
Regarding this use case the most characterizing part is obviously the file extension.<br />
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).<br />
<br />
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:<br />
<br />
t…txt<br />
t…jpg<br />
<br />
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:<br />
<br />
text-overflow-start<br />
text-overflow-middle<br />
text-overflow-end<br />
text-overflow-min-width<br />
<br />
<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.<br />
<br />
== Definition examples ==<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow: clip ellipsis clip 0 3ch;<br />
}<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow-start: clip;<br />
text-overflow-middle: ellipsis<br />
text-overflow-end: clip<br />
text-overflow-min-width: 0 3ch;<br />
}<br />
<br />
== See also ==<br />
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]</div>Sebastianzhttps://www.w3.org/wiki/index.php?title=Text-overflow_middle_cropping&diff=67541Text-overflow middle cropping2013-07-18T21:31:55Z<p>Sebastianz: Added illustration for how string cropping is working in Firebug</p>
<hr />
<div>== Existing behavior ==<br />
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.<br />
<br />
== Proposal ==<br />
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.<br />
<br />
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:<br />
<br />
text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ]<br />
<br />
Use case:<br />
[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].<br />
And this is how it looks like in Firebug:<br />
<br />
[[file:stringCroppingInFirebug.png]]<br />
<br />
Example:<br />
this_is_a_very_long_filename.txt<br />
this_is_a_very_long_filename2.jpg<br />
<br />
With the current implementation this could be cropped to something like this:<br />
<br />
this_is_a_very_lo…<br />
this_is_a_very_lo…<br />
<br />
So the file types and names can't be destinguished.<br />
<br />
If the truncation could be specified to happen in the middle of the word, this would look like:<br />
<br />
this_is_a_…ename.txt<br />
this_is_a_…name2.jpg<br />
<br />
Regarding this use case the most characterizing part is obviously the file extension.<br />
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).<br />
<br />
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:<br />
<br />
t…txt<br />
t…jpg<br />
<br />
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:<br />
<br />
text-overflow-start<br />
text-overflow-middle<br />
text-overflow-end<br />
text-overflow-min-width<br />
<br />
<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.<br />
<br />
== Definition examples ==<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow: clip ellipsis clip 0 3ch;<br />
}<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow-start: clip;<br />
text-overflow-middle: ellipsis<br />
text-overflow-end: clip<br />
text-overflow-min-width: 0 3ch;<br />
}<br />
<br />
== See also ==<br />
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]</div>Sebastianzhttps://www.w3.org/wiki/index.php?title=Text-overflow_middle_cropping&diff=67540Text-overflow middle cropping2013-07-18T21:14:18Z<p>Sebastianz: Enhanced the description of the proposal + syntax, added a description of the longhand properties and fixed the examples</p>
<hr />
<div>== Existing behavior ==<br />
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.<br />
<br />
== Proposal ==<br />
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.<br />
<br />
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:<br />
<br />
text-overflow: ( clip | ellipsis | <string> ){1,3} [ <length>(1,2) ]<br />
<br />
Use case:<br />
[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].<br />
<br />
this_is_a_very_long_filename.txt<br />
this_is_a_very_long_filename2.jpg<br />
<br />
With the current implementation this could be cropped to something like this:<br />
<br />
this_is_a_very_lo…<br />
this_is_a_very_lo…<br />
<br />
So the file types and names can't be destinguished.<br />
<br />
If the truncation could be specified to happen in the middle of the word, this would look like:<br />
<br />
this_is_a_…ename.txt<br />
this_is_a_…name2.jpg<br />
<br />
Regarding this use case the most characterizing part is obviously the file extension.<br />
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).<br />
<br />
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:<br />
<br />
t…txt<br />
t…jpg<br />
<br />
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:<br />
<br />
text-overflow-start<br />
text-overflow-middle<br />
text-overflow-end<br />
text-overflow-min-width<br />
<br />
<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.<br />
<br />
== Definition examples ==<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow: clip ellipsis clip 0 3ch;<br />
}<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow-start: clip;<br />
text-overflow-middle: ellipsis<br />
text-overflow-end: clip<br />
text-overflow-min-width: 0 3ch;<br />
}<br />
<br />
== See also ==<br />
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]</div>Sebastianzhttps://www.w3.org/wiki/index.php?title=Text-overflow_middle_cropping&diff=67522Text-overflow middle cropping2013-07-17T23:25:48Z<p>Sebastianz: Initial draft of the definition</p>
<hr />
<div>== Description ==<br />
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.<br />
Though for recognizability it's sometimes better to crop the string in the middle.<br />
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].<br />
<br />
Example:<br />
this_is_a_very_long_filename.txt<br />
this_is_a_very_long_filename2.jpg<br />
<br />
With the current implementation this would be cropped to something like:<br />
<br />
this_is_a_very_lo…<br />
this_is_a_very_lo…<br />
<br />
So the file types and names can't be destinguished.<br />
<br />
If the truncation could be specified to happen in the middle of the word, this would look like:<br />
<br />
this_is_a_…ename.txt<br />
this_is_a_…name2.jpg<br />
<br />
Regarding this use case the most characterizing part is obviously the file extension.<br />
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).<br />
<br />
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:<br />
<br />
t…txt<br />
t…jpg<br />
<br />
== Examples ==<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow: clip ellipsis clip 3ch;<br />
}<br />
<br />
p {<br />
white-space: nowrap; <br />
width: 100%; <br />
overflow: hidden;<br />
text-overflow-left: clip;<br />
text-overflow-middle: ellipsis<br />
text-overflow-right: clip<br />
text-overflow-min-width: 0 0 3ch;<br />
}<br />
<br />
== See also ==<br />
[https://bugzilla.mozilla.org/show_bug.cgi?id=740910 Enhancement request at Mozilla]</div>Sebastianz