Parametrize the style="margin-top:Xem" to set any X - html

I want to build by a plainText that is read from a file.
That file has that look:
Line1
Line3
Line2 is totally empty, even without a space.
The html file then looks like
<!DOCTYPE HTML PUBLIC><html>
<head>
<style type='text/css'>#editor { white-space: pre; }</style>
</head>
<body style="font-family: 'Segoe Print'; font-size:14pt">
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px">Line1</p>
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px"></p>
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px">Line3</p>
</body></html>
The code lines with "p id=..." are important. The middle line of them is ignored, so that there are only two lines shown. Thats because there is no text before the closing /p, right? I could of course enter a " " (space), but thats a dirty solution...
I've found a half-way solution by inserting "margin-top:Xem" instead of "margin-top:0px" in the lower line. X is "1". The question now is:
How can i put any other value, e.g. 4, for X when the program figured out that there are 4 empty lines?
EDIT: Here is what I tried. Nothing changed...
<!DOCTYPE HTML PUBLIC><html>
<head>
<style type='text/css'>p.editor { white-space: pre; min-height:1em; }</style>
</head>
<body style="font-family: 'Segoe Print'; font-size:14pt">
<p class='editor' style=" margin-top:0em; margin-bottom:0px;">Line1</p>
<p class='editor' style=" margin-top:0em; margin-bottom:0px;"></p>
<p class='editor' style=" margin-top:0em; margin-bottom:0px;">Line3</p>
</body></html>

A few points:
IDs must be unique. Change those to use classes instead.
You only need spaces to separate element attributes, not commas.
You should use CSS rather than inline styling.
If you want a a p element to display without any text included, simply give it a minimum height.
<p class="editor">Line 1</p>
<p class="editor"></p>
<p class="editor">Line 3</p>
p.editor {
white-space: pre;
margin:0;
min-height:16px;
}
By default p elements default to the height of the content within. With no content, there is simply no height. Specifying a minimum height means that the empty p element will always have some height regardless of whether it has content or not.
JSFiddle example.
If you want the empty line to be copy-able, however, you'll need to modify the HTML itself to use a non-breaking space ( ) instead of leaving your elements empty:
<p class="editor">Line 1</p>
<p class="editor"> </p>
<p class="editor">Line 3</p>
With this you wouldn't need the extra minimum height as the non-breaking space adheres to the font size of the element.
JSFiddle example.

The solution is for me:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style type='text/css'>h1 { white-space: pre; min-height:1em; font-family: arial;
font-size:8pt; color:green; margin-bottom:0px; margin-top:0px}
</style>
</head>
<body>
<h1>Line1</h1>
<h1></h1>
<h1>Line3</h1>
</body></html>
Inserting that in Phase, it works.
Setting that to a QTextBrowser, it does not. But that's another question

Related

Weird behaviour with strong tag within a height-defined element in HTML

Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.

Define paragraph spacing in word included html

I use includetext-function to include html* into a ms word 2010 document:
{ INCLUDETEXT "test.html" }
That's the html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
line-height: 100%;
}
p {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<p>Line 1<br/>Line 2</p>
</body>
</html>
I didn't manage to fomat paragraph spacing in word within the html/css. Neither the margin nor the padding property works. All other css properties I checked (font*, white-space, color) are working fine.
Without <p>-tag word sets paragraph spacing to 10 pt, within <p>-tag, I get "auto", which also makes trouble in my complete document.
Which css property is word-compatible to define paragraph spacing?
Thanks a lot.
(* xml with xslt stylesheet - but for demontration simplified)
Use id or class in every p tag(I know it's boring but try it) . I think that'll might work. And also try article or blockquote tag
The margin-property gets only accepted, if I add the property within the style-attribute. Inside the css-class, word ignores it.
This line works fine:
<p style="margin:0">Line 1<br/>Line 2</p>
strange behavior :-(

How to display multiline paragraph texts in a button, using jQuery Mobile?

Is there any CSS trick to display multiline text paragraphs in a button control. I don't want "pre" tag or Javascript solutions, because I will have a large number of button widgets!,
The below code is for your convenience:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Single Line Buttons</h1>
</div>
<div data-role="main" class="ui-content">
This should be a multiline Button containing sevaral lines of text like a paragraph
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
For your example code, just add the CSS:
.ui-btn {
white-space: normal;
text-align: left;
}
The normal white-space allows the text to wrap, while the text-align gives a standard left aligned paragraph. If you want to keep the center alignment, just remove text-align from the CSS.
Here is a DEMO
You can use the white-space css property if the text has line breaks like you want it.
.ui-btn { white-space: pre; }
Though, your selector may have to be more specific to override the default jquery-mobile styles.
Ex:
.ui-content .ui-btn { white-space: pre; }
http://jsfiddle.net/e00889yz/
Update:
The issue here is that jquery mobile's stylesheet defines white-space to be nowrap for the "ui-btn" class. So you have to override that property with a more specific css selector or the "!important" flag with either white-space pre (if your text already has line breaks) or as ezanker noted, white-space normal (if it does not have predefined linebreaks)
http://jsfiddle.net/e00889yz/1/

Reducing vertical space between two sections of text

I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help. Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.
If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":
Link Heading...
www.123.com
Some more text...
Here's the skinny
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
<a class=link href='http://www.123.com/'>
<span class=heading>Link Heading...</span>
</a>
<br>
<div class=result>
<span class=site>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.
I'd appreciate any pointers.
Thanks
use CSS line-height: or negativ margin: to change that vertical space
also be sure if you are using breaks <br> that their height: also changes the vertical space
It is because the table rows () has a height of 27 pixels.
If you set class to info in both and style .info {height: 27px; color:#222234}, they will be the same height as in the table.
<div class=result>
<span class=info>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
I would suggest getting rid of your <br> tags, and using a Block Element.
From the related Block formatting contexts:
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
This means that block elements, such as <div> and <p> (among others) will automatically include a line break after them, and the space between them can be controlled with margin. As such, I'd change your code to look more like the following:
<body>
<div class="heading">
<a class=link href='http://www.123.com/'>Link Heading...</a>
</div>
<div class=result>
<p class=site>www.123.com</p>
<p class=info>Some more text...</p>
</div>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
A couple other nitpicks:
Use quotes around your attribute values (<p class="site">...</p>)
Don't use tables for layout (using tables for tabular data is okay)
Proper indentation makes your code more readable
Hi here is a simple solution by putting everything and the same div and only applying a style the the link by using the "a".
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.result{
font-size:0.850em;
line-height:1.2em;
margin-bottom:20px
}
.result a
{
float:left;
font-size:1.2em;
margin:0;
font-weight:normal
}
.result a:link
{
color:#0000cc;
text-decoration: underline;
}
.result a:hover
{
color: #1a0186;
text-decoration: none;
}
</style>
</head>
<body>
<div class=result>
<a href='http://www.123.com/'>Link Heading...</a><br>
www.123.com <br>
Some more text...
</div>
</body>

add style to <p>

I want to change the font of the <p> tag in HTML so I tried:
<p style="font-family:'Myriad Pro','sans-serif'; font-size:10.0pt; color:#BE2D0F; ">
But it doesn't work, any suggestion how to do that? I need to change the font to this font color, font, and font type.
That code is correct.
See: http://jsfiddle.net/bcEKb/
Note that this only sets the style for that single <p> tag. To set the style of EVERY <p> tag, you need to use a separate stylesheet or put it in <head> like so:
<html>
<head>
<style type = "text/css">
p
{
font-family: "Myriad Pro", "sans-serif";
font-size: 10pt;
color: #BE2D0F;
}
</style>
</head>
<body>
<p>This paragraph has the style applied.</p>
<p>So does this one.</p>
</body>
</html>
See: http://jsfiddle.net/G6TKe/
If you have a external CSS file, ensure that you put a class for p if you want it to be used on EVERY paragraph, if its just the one paragraph then just put the code inline (as you have done and it works)
Try specifying the font names without the single quotes.