How to Align About the Colon in Each Line of Text Like Movie Credits Often Do

How to align about the colon in each line of text like movie credits often do

An easy and semantic way would be to use a definition list:

Demo

* {

  margin: 0;

  padding: 0;

}

dt {

  display: block;

  float: left;

  width: 100px;

  text-align: right;

}

dt:after {

  content: ':';

}

dd {

  display: block;

}

<dl>

  <dt>aaa</dt>

  <dd>111</dd>

  <dt>bbbbbbb</dt>

  <dd>22222</dd>

  <dt>cccccccccc</dt>

  <dd>33333333</dd>

  <dt>dd</dt>

  <dd>44</dd>

  <dt>eeee</dt>

  <dd>5555555</dd>

</dl>

autoscroll (like movie credits) but the user can takeover by simply scrolling

In your auto scroll routine before changing position check if previous position is the same as current scrolling position, if it's not - the user scrolled it:

let el = document.documentElement,
    footer = document.getElementById("status").querySelectorAll("td"),
    scroll_position = 0,
    scroll_speed = 0,
    scroll_delta = 1.12,
    scroller,
    status = "stopped";

el.addEventListener("click", scroll);

info();

function scroll(e)
{
  if (e.type == "click")
  {
    window.cancelAnimationFrame(scroller);
    scroll_position = el.scrollTop; //make sure we start from current position
    scroll_speed++; //increase speed with each click
    info("auto scroll");
  }
  //if previous position is different, this means user scrolled
  if (scroll_position != el.scrollTop)
  {
    scroll_speed = 0;
    info("stopped by user");
    return;
  }

  el.scrollTop += scroll_delta * scroll_speed; //scroll to new position
  scroll_position = el.scrollTop; //get the current position

  //loop only if we didn't reach the bottom
  if (el.scrollHeight - el.scrollTop - el.clientHeight > 0)
  {
    scroller = window.requestAnimationFrame(scroll); //loop
  }
  else
  {
    el.scrollTop = el.scrollHeight; //make sure it's all the way to the bottom
    scroll_speed = 0;
    info("auto stopped");
  }
}

function info(s)
{
  if (typeof s === "string")
    status = s;

  footer[1].textContent = el.scrollTop;
  footer[3].textContent = scroll_speed;
  footer[5].textContent = status;

}

//generate html demo sections
for(let i = 2, section = document.createElement("section"); i < 6; i++)
{
  section = section.cloneNode(false);
  section.textContent = "Section " + i;
  document.body.appendChild(section);
}

//register scroll listener for displaying info
window.addEventListener("scroll", info);

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body
{
  font-family: "Roboto", Arial;
  user-select: none;
}

section
{
  min-height: 100vh;
  font-size: 3em;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

section:nth-child(even)
{
  background: #0b0d19;
}

section:nth-child(odd)
{
  background: #131524;
}

#status
{
  position: fixed;
  bottom: 0;
  color: #fff;
  margin: 0.5em;
}

#status td:first-of-type
{
  text-align: end;
  padding-right: 0.4em;
}
#status td:last-of-type
{
  font-weight: bold;
}

<section>
  Click to start Scrolling
</section>

<table id="status">
  <tr><td>position:</td><td></td></tr>
  <tr><td>speed:</td><td></td></tr>
  <tr><td>status:</td><td></td></tr>
</table>

HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

Well, try this.

<table style="width:100%;">
    <tr>
        <td>
            <a href="listproducts.php">Products<span style="float:right;">>></span></a>
        </td>
    </tr>
</table>

Is it possible to globally text-align a table column without specifying a class in each row?

You could add a class to the fifth td in each row using jQuery, and style the class to align text to the right.

Alternatively (and the way I do it) is using the nth child selector.

tr td:nth-child(odd) {
    text-align: center;
}

tr td:nth-child(5) {
    text-align: right;
}

it's not compatible with IE 8.0, but it is a lot simpler than a JavaScript based solution.

RegEx to remove repeated start of line using TextWrangler

As a workaround for variable length lookbehind: PCRE allows alternatives of variable length

PCRE is not fully Perl-compatible when it comes to lookbehind. While Perl requires alternatives inside lookbehind to have the same length, PCRE allows alternatives of variable length.

An idea that requires to add a pipe for each character of max prefix length:

(?<=(\w\w:)|(\w:)) (.*\n?)\1?\2?

And replace with \t\3. See test at regex101. Capturing inside the lookbehind is important for not consuming / not skipping a match. Same pattern variable eg .NET: (?<=(\w+:)) (.*\n?)\1?

• (?<=(\w\w:)|(\w:)) first two capture groups inside lookbehind for capturing prefix: Two or one word characters followed by a colon. \w is a shorthand for [A-Za-z0-9_]

• (.*\n?) third capture group for stuff between prefixes. Optional newline to get the last match.

• \1?\2? will optionally replace the same prefix if in the following line. Only one of both can be set: \1 xor \2. Also space after colon would always be matched - regardless prefix.

---

Summary: Space after each prefix is converted to tab. Prefix of following line only if matches current.

       To match and replace multiple spaces and tabs: (?<=(\w\w:)|(\w:))[ \t]+(.*\n?)\1?\2?

Iterating over every two elements in a list

You need a pairwise() (or grouped()) implementation.

def pairwise(iterable):
    "s -> (s0, s1), (s2, s3), (s4, s5), ..."
    a = iter(iterable)
    return zip(a, a)

for x, y in pairwise(l):
   print("%d + %d = %d" % (x, y, x + y))

Or, more generally:

def grouped(iterable, n):
    "s -> (s0,s1,s2,...sn-1), (sn,sn+1,sn+2,...s2n-1), (s2n,s2n+1,s2n+2,...s3n-1), ..."
    return zip(*[iter(iterable)]*n)

for x, y in grouped(l, 2):
   print("%d + %d = %d" % (x, y, x + y))

In Python 2, you should import izip as a replacement for Python 3's built-in zip() function.

All credit to martineau for his answer to my question, I have found this to be very efficient as it only iterates once over the list and does not create any unnecessary lists in the process.

N.B: This should not be confused with the pairwise recipe in Python's own itertools documentation, which yields s -> (s0, s1), (s1, s2), (s2, s3), ..., as pointed out by @lazyr in the comments.

Little addition for those who would like to do type checking with mypy on Python 3:

from typing import Iterable, Tuple, TypeVar

T = TypeVar("T")

def grouped(iterable: Iterable[T], n=2) -> Iterable[Tuple[T, ...]]:
    """s -> (s0,s1,s2,...sn-1), (sn,sn+1,sn+2,...s2n-1), ..."""
    return zip(*[iter(iterable)] * n)

Getting parts of a URL (Regex)

A single regex to parse and breakup a
full URL including query parameters
and anchors e.g.

https://www.google.com/dir/1/2/search.html?arg=0-a&arg1=1-b&arg3-c#hash

^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$

RexEx positions:

url: RegExp['$&'],

protocol:RegExp.$2,

host:RegExp.$3,

path:RegExp.$4,

file:RegExp.$6,

query:RegExp.$7,

hash:RegExp.$8

you could then further parse the host ('.' delimited) quite easily.

What I would do is use something like this:

/*
    ^(.*:)//([A-Za-z0-9\-\.]+)(:[0-9]+)?(.*)$
*/
proto $1
host $2
port $3
the-rest $4

the further parse 'the rest' to be as specific as possible. Doing it in one regex is, well, a bit crazy.

---

Related Topics