Simtwo Simtwo - 6 months ago 16
HTML Question

How can I make my borders the same size?

I'm making a piece of JavaScript that puts words in blocks depending on their size (see the demo below).

I use a span in order to contain each word. My problem is that the borders are really thick at some places and thin elsewhere. I can't seem to find how to make the borders collapse, any ideas of how I could to do that?

NOTE: I size the borders using "vw" units in order to have them proportional to the viewport size.

You can see here the difference of borders



window.onload = function wordsinblocks(self) {

var demos = document.getElementsByClassName("demo"),
i = 0, len = demos.length,
demo;

for (; i < len; i++) {
demo = demos[i];
var initialText = demo.textContent,
wordTags = initialText.split(" ").map(function(word) {
return '<span class="word">' + word + '</span>';
});

demo.innerHTML = wordTags.join('');
}

self.disabled = true;
fitWords();
window.addEventListener('resize', fitWords);
}

function fitWords() {
var demos = document.getElementsByClassName("demo"),
sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
j = 0, len = demos.length,
demo, node,
i, nodeWidth,
match, index;

for (; j < len; j++) {

demo = demos[j];
var width = demo.offsetWidth,
calculated = sizes.map(function(size) {
return width * size / 100
});

for (i = 0; i < demo.childNodes.length; i++) {
node = demo.childNodes[i];
node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

nodeWidth = node.clientWidth;
match = calculated.filter(function(grid) {
return grid >= nodeWidth;
})[0];
index = calculated.indexOf(match);

node.classList.add('size-' + (index + 1));
}
}
}

.demo {
display: block;
padding: 0 0 0 1px;
overflow: auto;
}

.demo .word {
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
font-size: 2.9vw;
height: 10%;
font-family: "helvetica";
border: 1vw solid black;
}

.demo .word:hover {
background-color: blue;
color: white;
}

.demo .size-1 {
width: 7.69230769230769%;
}

.demo .size-2 {
width: 23.07692307692307%;
}

.demo .size-3 {
width: 46.15384615384614%;
}

.demo .size-4 {
width: 100%
}

<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>




Answer

You can accomplish this effect by using box-shadow along with a negative margin. I've also added some padding to the container so the edges aren't clipped.

Screenshot of the Result:

Screenshot of result

Live Demo:

window.onload = function wordsinblocks(self) {
    
    var demos = document.getElementsByClassName("demo"),
        i = 0, len = demos.length,
        demo;

    for (; i < len; i++) {
        demo = demos[i];
        var initialText = demo.textContent,
            wordTags = initialText.split(" ").map(function(word) {
                return '<span class="word">' + word + '</span>';
            });

        demo.innerHTML = wordTags.join('');
    }

    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

function fitWords() {
    var demos = document.getElementsByClassName("demo"),
      sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
        j = 0, len = demos.length,
        demo, node,
        i, nodeWidth,
        match, index;
        
    for (; j < len; j++) {
    
        demo = demos[j];
        var width = demo.offsetWidth,
            calculated = sizes.map(function(size) {
                return width * size / 100
            });

        for (i = 0; i < demo.childNodes.length; i++) {
            node = demo.childNodes[i];
            node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

            nodeWidth = node.clientWidth;
            match = calculated.filter(function(grid) {
                return grid >= nodeWidth;
            })[0];
            index = calculated.indexOf(match);
            
            node.classList.add('size-' + (index + 1));
        }
    }
}
.demo {
    display: block;
    padding: 1vw;
    overflow: auto;
}

.demo .word {
    float: left;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2.9vw;
    height: 10%;
    font-family: "helvetica";
    box-shadow: 0 0 0 1vw black;
    margin: 0.5vw;
}

.demo .word:hover {
    background-color: blue;
    color: white;
}

.demo .size-1 {
    width: 7.69230769230769%;
}

.demo .size-2 {
    width: 23.07692307692307%;
}

.demo .size-3 {
    width: 46.15384615384614%;
}

.demo .size-4 {
    width: 100%
}
<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>

Comments