Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

Боюсь, что никак... Хотя есть одна мысль (так, черновой набросок), правда только под IE:

1. Создаете таблицу фиксированной ширины (например, 500px).
2. Первую строку таблицы оставляете пустой
3. Во вторую строку таблицы помещаете рисунок шириной 500px.
4. Начинаете добавлять символы в первую строку, используя innerText (символы надо добавлять группами по 1-2-3, чередуя с пробелами).
5. При каждом добавлении символа проверяете, не изменились ли координаты рисунка относительно верхнего левого угла страницы (IE позволяет)
6. Если изменились (то есть был перенос строки, следовательно, позиция рисунка по Y тоже изменилась, т.к. он находится во второй строке), то, собственно, мы примерно определили, сколько символов текущего шрифта приходится на 500px.
7. А дальше — дело техники (вернее, математики)...


Вот такой топорный вариант

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

А зачем это надо?.. Вообще такими вещами лучше не заниматься... Ведь, вроде как, HTML изначально позиционировался как язык логической разметки... Поэтому как минимум неидеологично заниматься где-то на в скрипте пересчётом пикселов (за исключением создания каких-либо летающих/ползающих слоёв)... И вообще, насколько я знаю, узнать ширину сроки в пикселах в общем случае невозможно (вполне вероятно, что существуют какие-то частные случаи, когда это может стать возможным)...

Здравствуйте Flamer, Вы писали:

F>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

F>Боюсь, что никак... Хотя есть одна мысль (так, черновой набросок), правда только под IE:

F>1. Создаете таблицу фиксированной ширины (например, 500px).
F>2. Первую строку таблицы оставляете пустой
F>3. Во вторую строку таблицы помещаете рисунок шириной 500px.
F>4. Начинаете добавлять символы в первую строку, используя innerText (символы надо добавлять группами по 1-2-3, чередуя с пробелами).
F>5. При каждом добавлении символа проверяете, не изменились ли координаты рисунка относительно верхнего левого угла страницы (IE позволяет)
F>6. Если изменились (то есть был перенос строки, следовательно, позиция рисунка по Y тоже изменилась, т.к. он находится во второй строке), то, собственно, мы примерно определили, сколько символов текущего шрифта приходится на 500px.
F>7. А дальше — дело техники (вернее, математики)...


F>Вот такой топорный вариант

Спасибо огромное за идею

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Здравствуйте Flamer, Вы писали:

[покоцано]


F>>Вот такой топорный вариант

БТ>Спасибо огромное за идею

Дык, есть такие кнопы с цифирями

Здравствуйте Flamer, Вы писали:

F>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>Здравствуйте Flamer, Вы писали:

F>[покоцано]


F>>>Вот такой топорный вариант

БТ>>Спасибо огромное за идею

F>Дык, есть такие кнопы с цифирями

Не понял

Здравствуйте Борис Тюмнев, Вы писали:

БТ>Здравствуйте Flamer, Вы писали:

F>>Здравствуйте Борис Тюмнев, Вы писали:

БТ>>>Здравствуйте Flamer, Вы писали:

F>>[покоцано]


F>>>>Вот такой топорный вариант

БТ>>>Спасибо огромное за идею

F>>Дык, есть такие кнопы с цифирями

БТ>Не понял

Видите Справа от темы топика иконки с цифирками — "1", "х", "2", "3". Нажав на такую кнопку в понравившемся ответе, можно отблагодарить его автора оценкой.

Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
Реализовано уже в IE 4.

Здравствуйте, Protek, Вы писали:

P>Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
P>Реализовано уже в IE 4.

Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.

Так что имхо зря вы подняли тему трехлетней давности

Здравствуйте, Борис Тюмнев, Вы писали:

БТ>Каким образом можно определить длину строки в пикселах силами скрипта на клиентской стороне (JavaScript, к примеру).

<html><body>
<div style="width:500px; border-style:solid; overflow:hidden;">
<span id="test" style="white-space: nowrap; background-color:yellow;">very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very very very ver very very long string</span>
</div>
<button onclick="alert(test.offsetWidth)">offsetWidth?</button>
</body></html>

У меня в алерте написано 1062. Проверялось в IE6.

Здравствуйте, Flamer, Вы писали:

F>Здравствуйте, Protek, Вы писали:

P>>Есть свойство у HTMElement: offsetWidth — ширина элемента и всего его содержимого в пикселах.
P>>Реализовано уже в IE 4.

F>Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.

F>Так что имхо зря вы подняли тему трехлетней давности
Хм... А если так ?

<p id=a><nobr>Вот тут очень длинный текст</nobr></p>

Может быть в этом случае поможет?

F>Вы бы не спешили с выводами, ок? про offsetWidth я в курсе. А теперь представьте, что у нас есть строка, которая переносится на другую строку из-за малой ширины документа. А надо определить именно ширину всей исходной строки. Боюсь, offsetWidth тут не помощник.


что то я вашей проблемы не понял...

<html>
<head>
    <script>
        function GetWidth()
        {
            testHolder.innerText = prompt( "enter string" );
            document.recalc();
            return testHolder.scrollWidth;
        }
    </script>
</head>
<body>
    <div id="testHolder" style="width:0;height:0;overflow:hidden;white-space:nowrap"></div>
    <script>
        alert( GetWidth() );
    </script>
</body>
</html>

у меня работает.