I am trying to split a curly bracket over several lines.
The answer seems to be to use the ⎜ series characters to do the trick.
They render correctly in IE 11 and in Firefox but not in Chrome or Opera.
The page is http://www.c5d.co.uk/descriptioned181901.php
Are these known incompatibility errors ? Or is it something I have wrong in the browser settings ?
Thanks for any comments
Antony
Not just your site
http://www.codetable.net/decimal/9117
http://www.codetable.net/decimal/9128
* they’re OK in my Opera 12 but not my Chrome 39
How about something neater like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
max-width:960px;
width:100%;
margin:auto
}
td {
border:1px solid #000;
padding:10px
}
.col1 {
width:25%
}
.group {
position:relative;
padding:5px 0 5px 10px;
}
.group p {
margin:0
}
.group:before {
content:"";
width:5px;
border:1px solid #000;
border-right:1px solid #fff;
position:absolute;
top:0;
bottom:0;
left:0;
border-radius:3px;
}
.group:after {
content:"";
position:absolute;
top:50%;
left:-7px;
margin-top:-8px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid #000;
z-index:2;
width:0;
height:0;
overflow:hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">If the enumeration district includes more than one Civil Parish, Eccl Parish, Parly. Division, or Ward, state here the name of each and give its contents seperately: show separately also any detatched part or formerly detached part of a Civil Parish
Eccl Parish Rughtown
St John the Baptist (part of)</td>
<td><div class="group">
<p>Stockport Road from Prospect House and N<span class="superscript">os</span> 87 – 251 Lees Road N<span class="superscript">o</span> 12 to Holly Bank Farm and N<span class="superscript">o</span> 3 to <br>
Gorsey Bank, Cross Street N<span class="superscript">os</span> 2 – 8 and at back, Webster Street N<span class="superscript">os</span> 1 – 13, Sandbed including Ratcliffe's <br>
Buildings N<span class="superscript">os</span> 2 – 16, and Holden's Buildings N<span class="superscript">os</span> 1 3 and 2 – 12, Sandbed Lane N<span class="superscript">os</span> 1 – 11, Quickedge Road N<span class="superscript">os</span> 2 – 48 <br>
and 3 – 43, (to Austerberry's and Little Haigh Farm), Nield Street, Smith Street, Greaves Street N<span class="superscript">os</span> 1 – 19 and <br>
2 – 32 and houses off:— </p>
</div></td>
</tr>
</table>
</body>
</html>
Note that a p element is a paragraph element and not a tag for marking up inline fragments of text. You should be using span tags for that as in my example above.
You don;t need the breaks in my example unless you specifically wanted the text to wrap at exact points. The big bracket at the side will stretch automatically to contain the content.
This obviously works but it is far too advanced for me. I know I could copy and paste it and the page is great, but and this is a big but as far as I am concerned. This table covers 18 web pages at present and when I have done it will cover 25.
You suggest styling the table to 960 px. Is that what it is at present ? Or will it affect the table on all the other pages ?
Thanks for reading
Antony
Hi Antony,
I’m not sure what you mean by covers 18 pages exactly. Are you going to have one bracket spread over 18 pages and you are going to insert a character at every line? That would be a nightmare and pollute the integrity of your content and mark up.
My example needs no extra html apart form the wrapping div and will spread over as many pages as you like.
The table width has nothing to do with the example of the bracket. All you need to do is wrap the content in a div called group. The css will do the rest.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.group {
position:relative;
padding:5px 0 5px 10px;
}
.group p {
margin:0
}
.group:before {
content:"";
width:5px;
border:1px solid #000;
border-right:1px solid #fff;
position:absolute;
top:0;
bottom:0;
left:0;
border-radius:3px;
}
.group:after {
content:"";
position:absolute;
top:50%;
left:-7px;
margin-top:-8px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:8px solid #000;
z-index:2;
width:0;
height:0;
overflow:hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">Permanence of the stars. Cosmic fugue finite but unbounded. Billions upon billions Tunguska event shores of the cosmic ocean? Rings of Uranus. Circumnavigated emerged into consciousness, birth a very small stage in a vast cosmic arena rings of Uranus trillion something</td>
<td><div class="group">
<p>How far away kindling the energy hidden in matter the carbon in our apple pies, bits of moving fluff. Cambrian explosion tingling of the spine Apollonius of Perga! Hearts of the stars worldlets Flatland. Light years. Worldlets finite but unbounded tingling of the spine cosmic ocean hydrogen atoms circumnavigated Euclid birth the sky calls to us great turbulent clouds, Rig Veda Hypatia Drake Equation Hypatia. Globular star cluster. Hundreds of thousands, descended from astronomers explorations intelligent beings take root and flourish. Extraordinary claims require extraordinary evidence prime number.</p>
</div></td>
</tr>
</table>
</body>
</html>
If you are still not clear then just shout and I will try and explain:)
Thanks. I was unaware of the code table page. Something to bookmark
My Chrome browser is 39 too. Opera is 26
Thanks
Antony
OK, I will give it shot.
I’d prefer to look at it and figure it out before shouting out.
Thanks very much
Antony
Yes, it’s always best to have a play around with it first. Just try my code as a stand alone and then see if it will work for you. You can make the arrow part smaller if you want by changing the width of the border (the arrow is made by using mitred borders - http://css-tricks.com/snippets/css/css-triangle/ )
Thanks, I did play about with it, and it now works fine.
I changed the right border from white to 9ab# so that it matched the colour of the background and thus didn’t show a white line.
The two things I could not work out however were what causes the bracket to remain the right height, or length regardless of the number of rows. There are two tables on this page, each with the differing numbers of rows, yet the bracket closes at the right point on both tables.
Secondly, which bit would need to change if I wanted a right pointing bracket ?
Thanks
Antony
The element called .group contains all the rows and so will be as tall as its content at all times.
The bracket is placed at top:0 and bottom :0 in relation to .group (because of the position:relative) and therefore will always span the total height.
If you want to reverse the bracket then change the border-right to a border-left background match on group:before and then on group:after change the border-right to a border left.
If you want the bracket at the right of the text then set the whole thing to right:0 instead of left:0.
I did think I had tried that, but whilst it reverses the bracket the triangle simply disappears.
See http://www.c5d.co.uk/descriptioned181901.php
It’s the bottom table
Thanks for the explanation of what makes the bracket vary as required.
Antony
You just have a few little mistakes, such as having a negative border width, which is impossible, and giving the arrow border the same color as the background, rather than black. 
Try this:
.rightbracket:after {
content:"";
position:absolute;
top:50%;
left: 7px;
margin-top: -8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #000;
z-index: 20;
width:0;
height:0;
overflow:hidden;
}
I would also give a bit more padding to the container to give the arrow some breathing space. E.g.
.rightbracket {
position:relative;
padding: 5px 0 5px 18px;
}
Thanks for the reply. It does work now.
Sorry for the delayed response but have been away from the computer over Christmas
Antony
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.