I would like to have a code listing with alignment in HTML. This is an example of how it is supposed to look:
In this example, the beginning of the second line is aligned with the beginning of the last line, the parentheses before “url”, “method” and “parameters” are aligned, and the columns of symbols starting with colons are aligned. The distance from “url” to “:reader” and the like is supposed to be one text space. The distance between the two parentheses at the beginning of the second line is supposed to be zero, but one text space is acceptable.
How can I have that in HTML? Here are my ideas:
Tables seem obvious here, but the HTML code would be hard to read if they were used because they would be nested and inline.
Custom tabstops would solve it, but I don't know that HTML would have such thing. Does HTML have custom tabstops, that I can mark a position in the text, and all tabs associated with it would horizontally extend to that mark? It would be like tabstops in Word or a similar text processor, but with the tabstop positions calculated based on the text, not manually placed. This could be hacked somehow, like that a dummy element would be placed at the point of alignment, and the alignment would be done with an element with the width calculated by some Javascript as the difference in the coordinates X of that element and the dummy element.
The code is in a proportional typeface, so alignment with spaces isn't viable.
I tried to do it with tables. The following snippet is the best that I could do. The code is ugly and the vertical alignment of the parenthesis on the second line is off.
body {
font-family: sans-serif;
}
pre {
font-family: sans-serif;
display: inline;
}
table {
display: inline-table;
}
td {
vertical-align: top;
}
.indent {
width: 1.5em; display: inline-block;
}
<!doctype html><html>
<body>
(defclass request ()<br>
<span class="indent"></span><table><tr><td>(</td><td><table><tr><td>(url</td><td>:reader request-url</td></tr>
<tr><td></td><td>:initarg :url</td></tr>
<tr><td></td><td>:type string</td></tr>
<tr><td></td><td>:documentation "<pre>Request URL.</pre>")</td></tr></table></td>
<tr><td></td><td><table><tr><td>(method</td><td>:reader request-method</td></tr>
<tr><td></td><td>:initarg :method</td></tr>
<tr><td></td><td>:initform :get</td></tr>
<tr><td></td><td>:type keyword</td></tr>
<tr><td></td><td>:documentation "<pre>Request method, e.g :get, :post.</pre>")</td></tr></table></td></tr>
<tr><td></td><td><table><tr><td>(parameters</td><td>:reader request-parameters</td></tr>
<tr><td></td><td>:initarg :parameters</td></tr>
<tr><td></td><td>:initform nil</td></tr>
<tr><td></td><td>:type association-list</td></tr>
<tr><td></td><td>:documentation "<pre>The request parameters, as an association list.</pre>"))</td></tr></table></td></tr>
</table><br>
<span class="indent"></span>(:documentation "<pre>A general HTTP request.</pre>"))
</body>
</html>
Which solution is the most viable? is there a cleaner solution that I missed?
I implemented custom tabstops (the second idea) how I described it in the question.
The HTML code has tags marking alignment anchors (<align-anchor>). Then, it has tags for elements having an id as the attribute anchor (<align->); they are supposed to extend to the left border of the element with the given id. The id could be of any element, but I use only <align-anchor> for clarity. There are also <indent->; they are supposed to indent text from the beginning of the line, and they have a fixed width.
Questions about how to make this better:
How can I have custom self-closing HTML tags? all tags described in the previous paragraph are empty, so they don't need a closing tag, and not having it would make it much cleaner.
How can it be done so that the code is aligned first and then displayed? If I load the page, the code is not aligned for a short time, and then gets aligned. I'd like the code to be aligned as soon as it's displayed.
The code
function main() {
let tabs = document.getElementsByTagName("align-");
for (let tab of tabs) {
let x = tab.offsetLeft;
let tabstop = document.getElementById(tab.getAttribute("anchor"));
let tabstopX = tabstop.offsetLeft;
let width = tabstopX - x;
tab.style.width = `${width}px`;
}
}
window.onload = main
code-block {
white-space: pre-line;
font-family: sans-serif;
}
pre {
font-family: sans-serif;
}
code-block pre {
display: inline;
}
indent- {
display: inline-block;
width: 1.5em;
}
align- {
display: inline-block;
}
<!doctype html>
<html>
<body>
<code-block>
(defclass request ()
<indent-></indent->(<align-anchor id=1></align-anchor>(url <align-anchor id=2></align-anchor>:reader request-url
<align- anchor=2></align->:initarg :url
<align- anchor=2></align->:type string
<align- anchor=2></align->:documentation "<pre>Request URL.</pre>")
<align- anchor=1></align->(method <align-anchor id=3></align-anchor>:reader request-method
<align- anchor=3></align->:initarg :method
<align- anchor=3></align->:initform :get
<align- anchor=3></align->:type keyword
<align- anchor=3></align->:documentation "<pre>Request method, e.g :get, :post.</pre>")
<align- anchor=1></align->(parameters <align-anchor id=4></align-anchor>:reader request-parameters
<align- anchor=4></align->:initarg :parameters
<align- anchor=4></align->:initform nil
<align- anchor=4></align->:type association-list
<align- anchor=4></align->:documentation "<pre>The request parameters, as an association list.</pre>"))
<indent-></indent->(:documentation "<pre>A general HTTP request.</pre>"))
</code-block>
</body>
</html>
Related
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I am injecting html from an editor into my site. How can I 'inherit' the alignment from a child element like this:
<li>
<div align="right">one</div>
</li>
the issue is that the bullets are aligned left and text is right , I would like to get the alignment from whatever is set on the div in this case 'right'. This can be different since it is coming from an html-editor.
css:
ul, ol, li {
list-style: disc !important;
}
jsfiddle:http://jsfiddle.net/bfu20zhq/
There is no way to select a parent according to this and the MDN has nothing to suggest that this has changed recently.
However, as indicated in related posts, this can be achieved through javascript (and must be, since css can't do it yet). You can do this by walking the DOM tree and finding all the div elements that have a parent li and then make their align attributes the same:
// create the filter for the tree walker
var div_filter = {
acceptNode: function (node) {
if ( node.tagName == 'DIV' && node.parentElement.tagName == 'LI' ) {
return NodeFilter.FILTER_ACCEPT;
}
}
};
// create the tree walker so we can
// find all the divs
var treeWalker = document.createTreeWalker( document.body,
NodeFilter.SHOW_ELEMENT,
div_filter,
false);
// walk the DOM tree for the nodes we want
// and make the `li` elements have the same `align` as the `div`s
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.setAttribute('align',
/* fetch the div's align attribute */
treeWalker.currentNode.getAttribute('align') );
}
Unfortunately, while this correctly sets the align attribute, it doesn't give the desired result as you can see in this fiddle. I'm leaving this here however because we need it for the full solution.
Setting float: right on the list elements has an effect, but a horrible one.
After a bit of tweaking, I found that adding inside to list-style and adjusting text-align to right or left accordingly, the desired result is achieved:
This is what we want, if the div has align = "right"
li {
list-style: disc inside;
text-align: right;
}
We also need to change the divs to display: inline-block so they don't act like non-text elements:
li > div {
display: inline-block;
}
If you want to align the bullets vertically, you need to give the divs a definite width, such as width: 30% or something like that.
So our while loop changes to:
while (treeWalker.nextNode()) {
console.log(treeWalker.currentNode);
treeWalker.currentNode.parentElement.style.textAlign =
treeWalker.currentNode.getAttribute('align');
}
Here is the complete fiddle.
If you want the same alignment simply add "list-style-position: inside;" to your css like this fiddle.
li
{
list-style: disc;
list-style-position: inside;
}
thanks in advance for any help you can offer. I have been digging through the various posts here on SO trying to solve a missing page break issue. I have a number of cshtml templates that are rendered using a Razor template engine to produce an RTF file. When the file is opened in Word it completely dumps the html that contains the "break" style used to make a page break. The rest of the template renders exactly as designed. I am thinking that maybe my problem is I'm not rendering out the file correctly in the first place.
Sample .cshtml file starts with:
<div style="width: 100%;" class="newpage">
<p align="center" style="text-align:center">NOTICE</p>
<table>
....middle html content....
</table>
<p class="newpage"></p>
</div>
I've tried putting the page break at the beginning and the end just to see if it made any difference and it didn't.
The razor call that gets the .cshtml file is like this:
newNotice.Body = RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
return newNotice;
Then I render out the RTF file in the following code where the style for the page break exists:
protected void ProduceNotification(Notification notice, string title)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=" + title);
Response.ContentType = "application/rtf";
EnableViewState = false;
var stringWrite = new StringWriter();
var sb = new StringBuilder();
sb.Append(#"<html>
<head>
<title></title>
<style type='text/css'>
.body {
margin: 5em;
background-color: white;
width: 100%;
height: 100%;
font-family: Calibri;
}
.spacing {
line-height: 1.5em;
}
.newpage {
mso-special-character:line-break;
page-break-before:always;
clear: both;
}
</style>
</head><body>");
sb.Append(notice.Body);
sb.Append("</body></html>");
stringWrite.WriteLine(sb);
ClearChildControlState();
Response.Write(stringWrite.ToString());
Response.End();
}
When I open up the file in Word, the page breaks are not being respected so I saved the file to .html to see what the mark up looks like and here's what I see:
In the style definition section it shows the style:
p.newpage, li.newpage, div.newpage
{mso-style-name:break;
mso-style-unhide:no;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
page-break-before:always;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
But in the document where the html should show the element with the class on it, it looks like this instead (this is in the middle of the html output):
<div>
<p align=center style='text-align:center'>NOTICE </p>
<table>
......middle html content.....
</table>
</div>
Notice that the style and class are missing from the div tag and the p tag is missing all together. What I can't figure out is, is the conversion to RTF deleting these for some reason or is it the Razor Templating Engine that's stripping out the text? I've also tried changing this to output an .doc format also but the result has been the same.
So the aggravating answer also turned out to be the simplest one. The style was applying to p, li, or div elements but only if the element has some kind of content:
<div class='newpage'> </div>
As long as I used one of the correct elements, it works as long as there is some kind of content (in this case just a space). Once I had it working, I also had to address the issue of it adding an extra blank page to the output since originally I had the line in the cshtml file itself. Instead I moved it to the code behind.
I created a var to hold the last list item, as demonstrated in this SO post here.
var lastItem = myList.Last();
foreach(var d in myList)
{
newNotice.Body += RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
if(!ReferenceEquals(d, lastItem))
newNotice.Body += "<div class='newpage'> </div>";
}
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}
I would like to make groups of the text content of an <option /> tag. Say I have the following: <option>8:00 (1 hour)</option>, the time pattern 8:00 can be modified, then the text in parenthesis (1 hour) can also be modified.
I was thinking of doing something like
<option>
<span>8:00</span>
<span> (1 hour)</span>
</option>
Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?
From the HTML 5spec:
Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
If the element has no label attribute and is a child of a datalist element: Text.
So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.
From the HTML 4.01 spec:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)
An option element cannot have any child elements. So yes, it is bad.
You can use a Javascript plugin to overcome this limitation. For example jQuery plugin "Select2" Select2 plugin homepage. I use it in a couple of my projects and think that it's pretty flexible and convenient.
There are a number of them, but they do quite same thing - convert traditional <select> into <div> blocks with an extra functionality.
The option element
Content model: Text
No, it’s not ok. Consider keeping the values around in your script so you can recompose them when necessary.
You're better off using an HTML replacement for your <select> if you want to do this.
As established by other people, and I have tried with <b> and other tags, <option> does not take tags within it.
What you can do, since you cannot use <span> inside an <option> tag,
You can use the index number to extract the text via
document.getElementById(selectid).options[x].text where x is the relevant index, as a variable.
Then what you do is use the " (" to split the variable into the time, and remove the last character as well which removes the ")"
Sample:
<script type="text/javascript">
function extractSelectText()
{
var text = document.getElementById("main").options[1].text
/*
var tlength = text.length
var splitno = tlength - 1
var text2 = text.slice(0, splitno)
var textArray = text2.split(" )")
var time = textArray[0]
var hours = textArray[1]
}
</script>
Changing it is much simpler:
<script type="text/javascript">
function changeSelectText()
{
/* add your code here to determine the value for the time (use variable time) */
/* add your code here to determine the value for the hour (use variable hours) */
var textvalue = time + " (" + hours + ")"
document.getElementById("main").options[1].text
}
</script>
If you use a for function you can change each value of the select replacing 1 with 2, 3 and so on, and put a set interval function to constantly update it.
One option for editing would be to use some fancy pattern matching to update the content. It will be slower and more resource intensive, and depends on how regular the format is, but doesn't require any HTML modifications. My concern, however, would be on accessibility and the user experience. Having values change is hard for screen reader software to pick up, and it may also confuse other users.
It is not an answer, but may be it will help sombody, it is possible to mimic select with details tag. This example is not complete, I used javascript to close list on click
const items = document.querySelectorAll(".item");
// Add the onclick listeners.
items.forEach(item => {
item.addEventListener("click", e => {
// Close all details on page
closeList(item);
});
});
function closeList(item) {
document.querySelectorAll("details").forEach(deet => {
if (deet != this && deet.open) {
deet.open = !open;
console.log(item);
}
});
}
details {
border: 1px solid #aaa;
border-radius: 4px;
}
summary {
padding: .5em 0 .5em .5em;
font-weight: bold;
}
details[open] {
}
details[open] .item {
cursor: pointer;
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
details[open] .item:hover{
background-color: #f1f1f1;
}
details[open] .title{
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
<details>
<summary>Select your choice</summary>
<div class='title'>
This is attempt to mimic native <code>select</code> tag with html for <code>option</code> tag
</div>
<div class='item'>item 1</div>
<div class='item'>item 2</div>
<div class='item'>item 3</div>
</details>