Хобрук: Ваш путь к мастерству в программировании

Введите ширину текстового поля и ширину шрифта

Я хотел бы создать единый класс для установки ширины как текста, так и поля ввода текста, чтобы любая платформа печатала как предопределенные, так и введенные пользователем цифры. До сих пор кажется, что нет способа сделать так, чтобы текстовое поле ввода и ширина шрифта были одинаковыми на всех платформах?

text input fonts css box
24.06.2014

  • Вы должны быть более конкретными ... какова ширина шрифта? какие платформы? что вы подразумеваете под печатью как предопределенных, так и введенных пользователем цифр? 24.06.2014

Ответы:


1

Шрифты имеют немного разную ширину в разных ОС. Лучшее, что вы можете сделать, это выбрать универсальный шрифт с фиксированной шириной, чтобы вы использовали один и тот же (ну, очень похожий) шрифт в каждой системе. Затем установите ширину текстового поля с помощью css width: XXXpx;

Я бы начал с этого шрифта:

http://www.google.com/fonts#UsePlace%3ause/Collection%3aDroid+Sans+Mono

(не уверен, почему эта ссылка перенаправляется. Попробуйте скопировать/вставить ее)

Это позволит вам довольно близко.

24.06.2014
  • Я не знал о шрифтах с фиксированной шириной. Это интересно и полезно. Спасибо. Но все же, я думаю, будет серьезная разница между шириной конкретного шрифта фиксированной ширины и заданной шириной в пикселях между, скажем, iPad и IE. Я думаю, что мне, возможно, придется создать разделение для каждой цифры, независимо от того, помещаю ли я ее на экран или пользователь вводит ее, если я хочу, чтобы они все были в порядке? 24.06.2014
  • Нет, попробуй. Они очень похожи на разных устройствах. 24.06.2014
  • Спасибо за поддержку. Различное соотношение между шириной текстового поля и шириной текста от платформы к платформе все еще является проблемой для меня в этом проекте, даже несмотря на то, что настройки пикселей одинаковы для всех. Похоже, мне придется либо разработать код для конкретной платформы, либо элементы разделения на цифру. Мне очень жаль, что банкирам и учащимся начальной школы нужен доступ к одним и тем же инструментам. 24.06.2014
  • Похоже, я просто поддаюсь бессмысленной человеконенавистничеству, и фактическое решение заключается в установке отступа на 0, потому что на разных платформах есть разные отступы текстового поля по умолчанию. 24.06.2014
  • Да, всегда хорошо задавать стили, включая отступы, явно. Не знаю, на кого направлен этот человеконенавистнический комментарий. 24.06.2014
  • Мизантропический комментарий был адресован мне! При разработке этой технологии легко впасть в уныние и подозрения, поскольку кажется, что в каждой мельчайшей детали есть неожиданная ловушка. Но в искусстве, столь гибком в каждой детали и не прибегающем к помощи природы для смешивания ошибок, любая трудность точно равна той детали, которую не замечает рабочий. 25.06.2014

    • 2

    Есть несколько причин, по которым строка цифр в обычном содержимом может иметь ширину, отличную от строки цифр, как значение поля ввода текста: начертания шрифта могут отличаться, размеры шрифта могут отличаться, а поле ввода может иметь некоторую ширину. отступы, некоторые поля или границы по умолчанию. Чтобы справиться с этим, задайте эти свойства явно. Пример:

    <style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>
<span>1234567890</span><br>
<input value=1234567890>

    После этого значение в поле ввода будет выглядеть как обычное содержимое, а это серьезная проблема с удобством использования. Чтобы справиться с этим, установите границу одинаковой ширины для обоих элементов, но прозрачную для span:

    <style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border-width: 1px;
}
span {
  border-style: solid;
  border-color: transparent;
}
</style>

    (Поскольку значение transparent как border-color не поддерживается повсеместно, может быть безопаснее использовать определенное значение цвета, которое соответствует цвету фона окружающего элемента.)

    24.06.2014
  • Спасибо за ваш полезный ответ! 25.06.2014
    • Новые материалы
    Введение в контекст React
    В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..
    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..
    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..
    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...
    Базовое руководство по переносу концепций обучения в глубокое обучение
    Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..
    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..
    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..