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; }
Related
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}
The vertical column that contains the code line number is VSC is too wide. Is there a way to narrow it down?
You can't change the size of this column.
Actually there are three columns:
left of the linenumber is the column called glyphMargin, the place to set debugging breakpoints (red dot). (When you edit settings, the column displays a pen when you point on the line as seen in the screenshots below)
the line number itself
right of it you can fold/unfold your code.
If all three are active, it looks like this (settings) or a like above (code)
To save space you can
switch off the display of line numbers:
"editor.lineNumbers": "off"
switch off the code folding feature:
"editor.folding": false
if you don't use the debugger, disable the glyphMargin:
"editor.glyphMargin": false
This is probably not what you want, but if you don't use code folding or the debugger or don't need linenumbers, you can at least save a little bit of space.
To change these settings press ctrl, or click on the menu file/preferences/settings.
Actually, there is an undocumented setting in Visual Studio Code that will do exactly what you want. It's called "editor.lineDecorationsWidth", and although you will get some kind of warning Unknown setting parameters or underline squiggly, it WILL work.
This is the config for minimum possible space taken by line numbers (and keeping said line numbers, of course):
"editor.lineDecorationsWidth": 0,
"editor.glyphMargin": false,
"editor.folding": false,
source: https://github.com/Microsoft/vscode/issues/48791
[EDIT MAY 2020]
The name of the undocumented setting has apparently been changed to editor.lineDecorationsWidth
If you use the CustomizeUI plugin, you can edit the CSS to modify the width as follows... However, I notice one issue is that the click area of the folding arrows becomes a little misaligned (still usable, just a few pixels off). I'm not entirely sure how to fix it (didn't look hard enough possibly).
Here's some CSS for minifying the line number margin widths:
"customizeUI.stylesheet": {
// Change width/appearance of line-number, breakpoints, code-folding arrows:
".monaco-editor .margin": "background: #111; width: 55px !important;",
".monaco-editor .glyph-margin": "width: 0px !important;",
".monaco-editor .margin-view-overlays": "width: 55px !important;",
".monaco-editor .margin-view-overlays .cgmr": "width: 0px !important; display: none;", // hide breakpoints (I don't use them) (not necessary if editor.glyphMargin = false)
".monaco-editor .cldr.codicon.codicon-folding-expanded, .monaco-editor .cldr.codicon.codicon-folding-collapsed": "left: 22px !important; width: 30px !important;",
".monaco-scrollable-element.editor-scrollable": "left: 50px !important;",
".monaco-editor .margin-view-overlays .line-numbers": "left: 3px !important;"
}
If you create a font specifically for it I suspect that either filling the font bounds more and then setting it as the pref font, then adjusting zoom in/out. Depending on the graphics output preprocessing sometimes that scales the display that vsCode is rendering from its software. If it is in fact the case that maybe you're zoomed in too much to a small font, it might look different for you than anyone else. It may help to change try installing vscode in a vm to see if defaults look the same. Maybe it's a setting or extension causing a graphical artifact on your machine.
[Just in case people get here searching for how to change the glyph margin I'll note this coming "feature".]
A setting is being added to expand! the glyphMargin - that portion to the left of the line numbers where the breakpoint dots go for instance.
glyphMarginRightPadding
It is in v1.61 Insiders now and should be released to Stable early October 2021. But the default value 0 is the current width - you can only expand it with positive numbers unfortunately.
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>
When I put this in my css file:
label, input
{
font-size: 18px;
}
Text labels show up with font size 18, but text boxes aren't affected.
Also, when looking at the generated html code in the browser (Inspect element, using Chrome), I'm seeing that the input box has a set height.
So the question is, can I control the size of the text box and the size of the font inside the text box using just css?
If you add the !important declaration your css would take precedence on the smartgwt css declaration.
I've just tried and it works.
label, input {
font-size: 18px !important;
}
This is my css styling of my header
h2{
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
}
Now, when i type some word in it, the word suppose to be out of the image because the line-height is same as the height of the text , but it is still inside it, why?
To answer your question, yes, line-height works on a single line of text. Given a certain line-height, the browser will attempt to render the text in the middle of that line-height. So if the element has a height of 46px and a line-height of 46px, and assuming the font-size is 30px, there will be (46-30)/2 = 8px open above and below the text.
So the line-height property, when used with only one line of text, can be used to keep text vertically centered by setting it to the same value as height.
Just use: padding-top: 46px , please note line-height will NOT be added to the height
read more.
EDIT: when I say it won't be added, I mean it can't be understood as:
Final height = height + line-height
Try using margin-top: -46px;. That will work for sure.