I'm developing an HTML email on Sailthru and was wondering if there is a way to truncate a long item title? If it is past 15 characters, to show the first 15 characters and then add an ellipsis?
I've looked at the developer's handbook and could not find anything on this. Let me know where and if I can find any information on this.
What I have it currently this
{if length(item.title) < 15}{item.title}{/if}
{if length(item.title) > 15}{item.title=slice(content, 0, 14)}{/if}
The way to make this work in an email is to figure out the maximum length of the title and set that as your max-width. Any overflow beyond that point will be replaced by an elipsis. It's not very elegant because you can't get it to break gracefully at the end of a word, but this works with most email clients.
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 200px;
}
Example:
https://jsfiddle.net/wallyglenn/0uvv01jr/
You can make this method work with character count if you can determine your font, write out 123456789012345, determine your max-width for 15 characters and you're set.
Good luck with long names.
Here's how to use Sailthru Zephyr code to limit a string to its first 15 characters, and then add an ellipsis:
{if length(item.title) < 15}{item.title}{else}{substr(item.title, 0, 15)}...{/if}
Related
Hello Dears Stack Overflow, Great site, I have been able to solve many questions with your guidance.
Issue:
Working with a php website script I be having issues when atempt to submit a form to database whit a field DESCRIPTION (mediumblob) that usually look as ie.:
<div align="center"><span style="color: rgb(0, 0, 205); font-family: Verdana; font-size: 18pt;">Lamps Osram H7 Halogen.</span></div><div align="center"><span style="color: rgb(0, 0, 205); font-family: Verdana; font-size: 18pt;">12 Volts - 55 Wats.</span></div>
The form have your enctype="multipart/form-data" and the html is edited with InnovaStudio WYSIWYG editor.
When I use Mozilla, Chrome, Ie explorer 11, the form is submitted, and the values stored in database, but when I use IE Edge (windows 10) the proccess abort and display a white screen with the number simbol (#). Removing the color format (ie: color: rgb(0, 0, 205);) the form is submitted, and the values stored in database.
I execute a php mysql error tester script and no query error is present.
Once again I try in IE Edge with another editor that send color as name colors (red, green, yellow, etc.) and the form is submitted, and the values stored in database.
I can only conclude the problem is due to the rgb colors.
Do you have any suggestions or possible solution? Thank you very much.
Thank you for your cooperation.
No error is showed at page code when appear the white screen with #.
I have tried to replace the color names with the rgb codes, but these are sent in hexadecimal format, and the form submitted without errors.
I have used for the test the rich content editor developed by Mozilla.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
I do not know if the format that is sent is inherent to the Agents or comes from the java part of the editors.
I have not been able to find, either in the original editor (InnovaStudio), or the proofs test editor(Mozilla rich content), code for replacement of the color system, only arrays of hex or name colors.
Another curious circumstance with the original editor, is that once the html has been saved in the database without color format, then there are no problems to modify it to text with color in IE Edge and the inserted colors are rgb.
I will continue to do some tests, and if I find any definition of the problem, I will publish it.
Thanks again.
I'm trying to output media control characters as HTML entities so they can be styled using the CSS color property for multiple themes. As usual nay-sayers dominate the mailing lists so we have thousands of useless Unicode characters but not universally recognized media control characters (apparently).
Here are the HTML entities I've attempted to output in Firefox and Chrome unsuccessfully...
<span>⏸ - ⏸</span>
<span>⏹ - ⏹</span>
<span>⏴ - ⏴</span>
<span>⏵ - ⏵</span>
<span>⏭ - ⏭</span>
<span>⏮ - ⏮</span>
I serve all pages as UTF-8 and have tried messing with a few font-family fonts such as Segoe though I'm trying to find truly free-to-use fonts (ttf/woff) should I go that route.
The general gist...
A small image of what I've used in the past that I'm trying to emulate...
<|| Prevous Track: empty (non-filled) left facing triangle with single empty bar on right.
|> PLAY: Empty right-facing triangle.
[][] Pause: Two vertically long empty rectangles.
[ ] Stop: Empty square.
||> Next Track: [empty (non-filled) right-facing triangle with single empty bar on right.
I've done a lot of research trying to get Unicode characters to keep this as simple as possible...
fileformat.info/info/unicode/char/23ee
fileformat.info/info/unicode/char/23f5
fileformat.info/info/unicode/char/23f8
fileformat.info/info/unicode/char/23f9
fileformat.info/info/unicode/char/23ef
...though I'm willing to use Canvas/SVG to draw the images if there is no reliable Unicode characters/font combinations I can use?
Preferably
How do I insert Unicode characters (with which specific cross-platform or ttf/woff fonts if necessary) of the media keys?
Alternatively
What would be the minimal code I'd need for Canvas/SVG to draw the characters and then style them with CSS color property?
Tertiary Preference
How could I create a ttf/woff font with the specific characters I want using open source or freeware software (on Windows)? If I go this route I'll happily make the font available on some third-party font site with directions.
After a bit of research someone suggested using Awesome Font which has media characters. I don't like using CSS content except for certain rare development related conditions so I used the HTML Escape tool copy/paste characters to get their numeric entities. Tested in IE 11, Firefox 31, Opera 12.1, Chrome 37 and on Firefox/Chrome on Android 4.1.
CSS
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
HTML
<p>
</p>
I wanted to have a block of text aligned to the right, which takes up less horizontal space then the rest of the text on that page. How'd I go about it?
The problem with it being completed in literal HTML is that org-mode automatically puts any text outside the sections into a <p> tag (and it is not a block element, so floating inside of it isn't generally a good thing etc.)
Here's how I have it now (and it displays fine, so I'd like it to be more or less like that):
#+BEGIN_HTML
<div style="width:100%;height:84pt">
<p class="epigraph">
<em>
I have not increased nor diminished the measure,<br/>
I have not diminished the palm,<br/>
I have not encroached upon fields,<br/>
I have not added to the balance weights,<br/>
I have not tempered with the plumb bob of the balance.</em>
<br/>
<span style="text-align:right;width:100%;display:block">
<b style="line-height:24pt;font-weight:bold">
The Book of the Dead, Spell 125.</b>
</span>
</p></div>
#+END_HTML
Plus I have this CSS:
.epigraph {
float:right;
font-size:10pt;
font-family:serif;
line-height:12pt;
color: #aaa
}
But I'd rather it be automatic...
OK, I think I found something that worked similar enough to what I wanted:
#+BEGIN_VERSE
I have not increased nor diminished the measure,
I have not diminished the palm,
I have not encroached upon fields,
I have not added to the balance weights,
I have not tempered with the plumb bob of the balance.
-- The Book of the Dead, Spell 125.
#+END_VERSE
This generates HTML that later with some use of CSS is possible to format in the way it would look more or less like an epigraph. Not perfect, but will do.
during my test, I find when converting following html content to docx, the original style will be lost.
< a href="http://www.google.com">Google< /a>
result in docx: no underline.
< p>< span style="text-decoration: underline;">underline text< /span>< /p>
result in docx: no underline
< p>< span style="text-decoration: line-through;">delete text< /span>< /p>
result in docx: no delete line
< p style="margin-left:30.0px;">indent text< /p>
result in docx: no any indent
< h1>header line< /h1>
result in docx: only plain text
< p>< span style="background-color: rgb(255,255,0);">background color< /span>< /p>
result in docx:no any background-color
< hr/>
result in docx: empty
< table style="border-width:1px;">...
result in docx: no border
< span style="font-family: arial , helvetica , sans-serif;font-size: large;">...
result in docx: font setting all missed.
Any one know how to deal with these issues? or any workaround?
The comment in the XHTMLImporter source code notes that some of these things remain to be implemented.
Re your #4, I think indent is supported. Maybe just not for the units you have used?
Re your #8 table borders, there is some support for these; Google for other posts.
Implementing underline, delete, and background-color all ought to be straightforward.
If you'd like to do that, we're happy to accept a pull request.
From doing a little research I've found that MS Outlook will not render line-height in an HTML email at anything less than 16px.
This is a bit of a problem as I really need it a fair amount smaller.
Does anyone know of a fix for this??
What code are you using? It will go lower than 16px, but only if the font-size is 14px or smaller. Also, make sure you are setting the line-height on the parent TD - i.e. on the closest block-level element, rather than an inline element.
make sure you have 0 padding and margins, have "display:block" on everything inline (esp. images!) and set line-height to the height you expect.
Outlook <2007 uses IE as a rendering engine, 2010 uses WORD.
Yes, it's very lame.
This CSS might fix the issue, but it will only work on block elements (p, div, ..etc):
mso-line-height-rule:exactly; line-height:10px;
If you are trying to create vertical spacing, use the line-height and font-size to enforce a height:
line-height:5px;font-size:5px;height:5px;
Outlook.com (Hotmail) will override your line-height CSS with theirs, so you need to use this to "reset" your CSS after they modify it:
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font,
.ExternalClass td, .ExternalClass div {line-height: 100% !important;}
Outlook.com continued: Then if you have any elements that had line-height:0 you will need to give them an id attribute, and then specifically reset those:
.ExternalClass #elementWithNoLineHeight { line-height:0 !important; }